@lion/ui 0.10.1 → 0.11.1

package/README.md

@@ -45,7 +45,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 - **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
 - **Modern Code:** Lion is distributes as pure es modules.
-- **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
+- **Exposes functions/classes and Web Components:** Ships a functionality in its most appropriate form.
 
 > Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
 
@@ -113,7 +113,7 @@ You can also use the lion elements directly, although this is likely not a commo
 
 ## Issues
 
-If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additional adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
+If you encounter an issue with any of the packages we are offering please open a [new bug issue](https://github.com/ing-bank/lion/issues/new?assignees=&labels=&template=bug_report.md&title=). Be sure to include a description of the expected and the current behavior - additionally adding a [reproduction](https://webcomponents.dev/edit/kpZmz1CJN580OaXsk56f?pm=1) always helps.
 
 ## Feature requests
 

package/components/checkbox-group/src/LionCheckboxIndeterminate.js

@@ -49,17 +49,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
    * @protected
    */
   get _subCheckboxes() {
-    let checkboxes = [];
-    if (
-      this._checkboxGroupNode &&
-      this._checkboxGroupNode.formElements &&
-      this._checkboxGroupNode.formElements.length > 0
-    ) {
-      checkboxes = this._checkboxGroupNode.formElements.filter(
-        checkbox => checkbox !== this && this.contains(checkbox),
-      );
-    }
-    return /** @type LionCheckbox[] */ (checkboxes);
+    return /** @type LionCheckbox[] */ (this.__subCheckboxes);
   }
 
   _storeIndeterminateState() {
@@ -97,9 +87,14 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         this.indeterminate = false;
         this.checked = false;
         break;
-      default:
+      default: {
         this.indeterminate = true;
-        this.checked = false;
+        const disabledUncheckedElements = subCheckboxes.filter(
+          checkbox => checkbox.disabled && checkbox.checked === false,
+        );
+        this.checked =
+          subCheckboxes.length - checkedElements.length - disabledUncheckedElements.length === 0;
+      }
     }
     this.updateComplete.then(() => {
       this.__settingOwnChecked = false;
@@ -155,13 +150,12 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         subCheckboxes.length > 0 && subCheckboxes.length === checkedElements.length;
       const allDisabled =
         subCheckboxes.length > 0 && subCheckboxes.length === disabledElements.length;
-      const hasDisabledElements = disabledElements.length > 0;
 
       if (allDisabled) {
         this.checked = allChecked;
       }
 
-      if (this.indeterminate && (this.mixedState || hasDisabledElements)) {
+      if (this.indeterminate && this.mixedState) {
         this._subCheckboxes.forEach((checkbox, i) => {
           // eslint-disable-next-line no-param-reassign
           checkbox.checked = this._indeterminateSubStates[i];
@@ -211,6 +205,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     if (!(/** @type {HTMLElement} */ (ev.target).hasAttribute('role'))) {
       /** @type {HTMLElement} */ (ev.target)?.setAttribute('role', 'listitem');
     }
+    this.__addToSubCheckboxes(/** @type {CustomEvent} */ (ev).detail.element);
     this._setOwnCheckedState();
   }
 
@@ -223,6 +218,26 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     if (/** @type {HTMLElement} */ (ev.target).getAttribute('role') === 'listitem') {
       /** @type {HTMLElement} */ (ev.target)?.removeAttribute('role');
     }
+    this.__removeFromSubCheckboxes(/** @type {CustomEvent} */ (ev).detail.element);
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  __addToSubCheckboxes(element) {
+    if (element !== this && this.contains(element)) {
+      this.__subCheckboxes.push(element);
+    }
+  }
+
+  /**
+   * @param {HTMLElement} element
+   */
+  __removeFromSubCheckboxes(element) {
+    const index = this.__subCheckboxes.indexOf(element);
+    if (index !== -1) {
+      this.__subCheckboxes.splice(index, 1);
+    }
   }
 
   constructor() {
@@ -230,6 +245,8 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
     this.indeterminate = false;
     this._onRequestToAddFormElement = this._onRequestToAddFormElement.bind(this);
     this.__onModelValueChanged = this.__onModelValueChanged.bind(this);
+    /** @type {HTMLElement[]} */
+    this.__subCheckboxes = [];
     /** @type {boolean[]} */
     this._indeterminateSubStates = [];
     this.mixedState = false;
@@ -259,7 +276,13 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
   /** @param {import('lit-element').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
-    if (changedProperties.has('indeterminate')) {
+
+    // When 1. sub checkboxes have disabled elements and 2. some elements are checked while the others are unchecked
+    // both this._inputNode.indeterminate and this.indeterminate are already true.
+    // If user clicks the input node, this._inputNode.indeterminate is turned to false by the browser
+    // while this.indeterminate is still true and the 'indeterminate' is not in the changedProperties
+    // because it hasn't been updated (true -> true) but checked would have been updated (false -> true).
+    if (changedProperties.has('indeterminate') || changedProperties.has('checked')) {
       this._inputNode.indeterminate = this.indeterminate;
     }
   }

package/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js

@@ -205,7 +205,84 @@ export function runCheckboxIndeterminateSuite(customConfig) {
 
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
-      expect(elIndeterminate?.checked).to.be.false;
+      expect(elIndeterminate?.checked).to.be.true;
+    });
+
+    it('should be checked when all children are prechecked', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon"></${childTag}>
+          <${childTag} checked label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
+    });
+
+    it('should be checked when it has one prechecked child', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('checked')).to.be.true;
+    });
+
+    it('should be unchecked when it has an disabled checked child and an unchecked child', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} disabled checked label="Archimedes"></${childTag}>
+          <${childTag} label="Francis Bacon"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('checked')).to.be.false;
+    });
+
+    it('should be indeterminated when some of the children are prechecked', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon"></${childTag}>
+          <${childTag} label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+
+      // Assert
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
     });
 
     it('should sync all children when parent is checked (from indeterminate to checked)', async () => {
@@ -384,6 +461,65 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
     });
 
+    it('should sync all prechecked children when parent is indeterminate and some of the children are disabled (from checked to unchecked)', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ (
+        await fixture(html`
+        <${groupTag} name="scientists[]">
+          <${tag} label="Favorite scientists">
+            <${childTag} checked label="Archimedes"></${childTag}>
+            <${childTag} disabled label="Francis Bacon"></${childTag}>
+            <${childTag} checked label="Marie Curie"></${childTag}>
+          </${tag}>
+        </${groupTag}>
+      `)
+      );
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+      // Act
+      _inputNode.click();
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
+      expect(_inputNode?.hasAttribute('indeterminate')).to.be.false;
+      expect(_subCheckboxes[0].hasAttribute('checked')).to.be.false;
+      expect(_subCheckboxes[1].hasAttribute('checked')).to.be.false;
+      expect(_subCheckboxes[2].hasAttribute('checked')).to.be.false;
+    });
+
+    it('should stay as indeterminated after it is clicked, when it is interminated already and some children are disabled', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ (
+        await fixture(html`
+        <${groupTag} name="scientists[]">
+          <${tag} label="Favorite scientists">
+            <${childTag} checked label="Archimedes"></${childTag}>
+            <${childTag} disabled label="Francis Bacon"></${childTag}>
+            <${childTag} label="Marie Curie"></${childTag}>
+          </${tag}>
+        </${groupTag}>
+      `)
+      );
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      const { _subCheckboxes, _inputNode } = getCheckboxIndeterminateMembers(elIndeterminate);
+
+      // Act
+      _inputNode.click();
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+      expect(_inputNode.indeterminate).to.be.true;
+      expect(_subCheckboxes[0].hasAttribute('checked')).to.be.true;
+      expect(_subCheckboxes[2].hasAttribute('checked')).to.be.true;
+    });
+
     it('should work as expected with siblings checkbox-indeterminate', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ (
@@ -450,6 +586,58 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       expect(elSecondSubCheckboxes._subCheckboxes[1].hasAttribute('checked')).to.be.false;
     });
 
+    it('should work as expected when new checkbox was added', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon" checked></${childTag}>
+          <${childTag} checked label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.false;
+
+      // Act
+      const newChild = document.createElement(/** @type {string} */ (cfg.childTagString));
+      elIndeterminate.appendChild(newChild);
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+    });
+
+    it('should work as expected when an existing checkbox was removed', async () => {
+      // Arrange
+      const el = /**  @type {LionCheckboxGroup} */ await fixture(html`
+      <${groupTag} name="scientists[]">
+        <${tag} label="Favorite scientists">
+          <${childTag} checked label="Archimedes"></${childTag}>
+          <${childTag} checked label="Francis Bacon" checked></${childTag}>
+          <${childTag} label="Marie Curie"></${childTag}>
+        </${tag}>
+      </${groupTag}>
+    `);
+
+      const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+        el.querySelector(`${cfg.tagString}`)
+      );
+      expect(elIndeterminate.hasAttribute('indeterminate')).to.be.true;
+      expect(elIndeterminate.checked).to.be.false;
+
+      // Act
+      elIndeterminate.removeChild(/** @type {ChildNode} */ (elIndeterminate.lastChild));
+      await elIndeterminate.updateComplete;
+
+      // Assert
+      expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.true;
+    });
+
     it('should work as expected with nested indeterminate checkboxes', async () => {
       // Arrange
       const el = /**  @type {LionCheckboxGroup} */ (

package/components/form-core/src/FocusMixin.js

@@ -198,19 +198,19 @@ const FocusMixinImplementation = superclass =>
      * @private
      */
     __teardownEventsForFocusMixin() {
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'focus',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocus),
       );
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'blur',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchBlur),
       );
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'focusin',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusin),
       );
-      this._focusableNode.removeEventListener(
+      this._focusableNode?.removeEventListener(
         'focusout',
         /** @type {EventListenerOrEventListenerObject} */ (this.__redispatchFocusout),
       );

package/components/form-core/src/LionField.js

@@ -44,7 +44,7 @@ export class LionField extends FormControlMixin(
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this._inputNode.removeEventListener('change', this._onChange);
+    this._inputNode?.removeEventListener('change', this._onChange);
   }
 
   resetInteractionState() {

package/components/input-amount/test/lion-input-amount.test.js

@@ -131,7 +131,7 @@ describe('<lion-input-amount>', () => {
     expect(_inputNode.value).to.equal('100.12');
   });
 
-  it('adjusts formats with locale when formatOptions.mode is "user-edited"', async () => {
+  it('formats with locale when formatOptions.mode is "user-edited" and value has three decimal places', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(
         html`<lion-input-amount
@@ -154,6 +154,14 @@ describe('<lion-input-amount>', () => {
     expect(el.modelValue).to.equal(123456);
     expect(el.formattedValue).to.equal('123.456,00');
 
+    // When editing an already existing value, we interpet the separators as they are.
+    // However, only when the decimal places are 3 or more.
+    mimicUserInput(el, '123.456.00');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(123456);
+    expect(el.formattedValue).to.equal('123.456,00');
+
     // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
     // When a user finished editing, the default should be restored.
     // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
@@ -162,6 +170,45 @@ describe('<lion-input-amount>', () => {
     expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
   });
 
+  it('formats with heuristic when formatOptions.mode is "user-edited" and value has two decimal places', async () => {
+    const el = /** @type {LionInputAmount} */ (
+      await fixture(
+        html`<lion-input-amount
+          .modelValue=${64}
+          currency="EUR"
+          .formatOptions="${{ locale: 'en-GB' }}"
+        ></lion-input-amount>`,
+      )
+    );
+    const parserSpy = sinon.spy(el, 'parser');
+    const formatterSpy = sinon.spy(el, 'formatter');
+
+    expect(el.formattedValue).to.equal('64.00');
+    // @ts-expect-error [allow-protected] in test
+    expect(el._inputNode.value).to.equal('64.00');
+
+    // When editing an already existing value, we interpret the separators based on decimal places when there's 1 or
+    // less separator in total (otherwise we would accidentally multiply or divide by 1000)
+    mimicUserInput(el, '64,00');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(64);
+    expect(el.formattedValue).to.equal('64.00');
+
+    mimicUserInput(el, '64,0');
+    expect(parserSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('user-edited');
+    expect(el.modelValue).to.equal(64);
+    expect(el.formattedValue).to.equal('64.00');
+
+    // Formatting should only affect values that should be formatted / parsed as a consequence of user input.
+    // When a user finished editing, the default should be restored.
+    // (think of a programmatically set modelValue, that should behave idempotent, regardless of when it is set)
+    el.modelValue = 1234;
+    expect(el.formattedValue).to.equal('1,234.00');
+    expect(formatterSpy.lastCall.args[1]?.mode).to.equal('auto');
+  });
+
   it('sets inputmode attribute to decimal', async () => {
     const el = /** @type {LionInputAmount} */ (
       await fixture(`<lion-input-amount></lion-input-amount>`)

package/components/input-amount/test/parsers.test.js

@@ -69,6 +69,6 @@ describe('parseAmount()', async () => {
     expect(parseAmount('123.456,78', { mode: 'auto' })).to.equal(123456.78);
     expect(
       parseAmount('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
-    ).to.equal(123.45678);
+    ).to.equal(123456.78);
   });
 });

package/components/localize/src/number/parseNumber.js

@@ -20,25 +20,34 @@ import { getDecimalSeparator } from './getDecimalSeparator.js';
  * @return {string} unparseable|withLocale|heuristic
  */
 function getParseMode(value, { mode = 'auto', viewValueStates } = {}) {
-  const separators = value.match(/[., ]/g);
+  const separatorsRe = /[., ]/g;
+  const separators = value.match(separatorsRe) || [];
+  // @ts-expect-error [wait-for-platform-types]
+  const decimalPlaces = (value.split(separatorsRe) || []).at(-1).length;
+  const isCurViewFormattedAndUserIsEditing =
+    viewValueStates?.includes('formatted') && mode === 'user-edited';
 
   // When a user edits an existing value, we already formatted it with a certain locale.
-  // For best UX, we stick with this locale
-  const shouldAlignWithExistingSeparators =
-    viewValueStates?.includes('formatted') && mode === 'user-edited';
+  // For best UX, we stick with this locale. However, we only do this when the user has
+  // entered at least 3 decimal places.
+  const shouldUseCurLocale = isCurViewFormattedAndUserIsEditing && decimalPlaces > 2;
 
-  if (!separators || shouldAlignWithExistingSeparators) {
+  const shouldUseLocale =
+    shouldUseCurLocale ||
+    !separators.length ||
+    (mode === 'auto' && separators.length === 1 && decimalPlaces >= 3);
+  if (shouldUseLocale) {
     return 'withLocale';
   }
-  if (mode === 'auto' && separators.length === 1) {
-    const decimalLength = value.split(`${separators}`)[1].length;
-    if (decimalLength >= 3) {
-      return 'withLocale';
-    }
-  }
-  if (separators.length === 1 || separators[0] !== separators[separators.length - 1]) {
+
+  const shouldUseHeuristic =
+    (isCurViewFormattedAndUserIsEditing && decimalPlaces <= 2) ||
+    separators.length === 1 ||
+    separators[0] !== separators[separators.length - 1];
+  if (shouldUseHeuristic) {
     return 'heuristic';
   }
+
   return 'unparseable';
 }
 

package/components/localize/test/number/parseNumber.test.js

@@ -82,7 +82,7 @@ describe('parseNumber()', () => {
     expect(parseNumber('123.456,78', { mode: 'auto' })).to.equal(123456.78);
     expect(
       parseNumber('123.456,78', { mode: 'user-edited', viewValueStates: ['formatted'] }),
-    ).to.equal(123.45678);
+    ).to.equal(123456.78);
   });
 
   it('detects separators unparseable when there are 2 same ones e.g. 1.234.56', () => {

package/components/localize/types/LocalizeMixinTypes.ts

@@ -67,11 +67,6 @@ export declare class LocalizeMixinHost {
 
   public localizeNamespacesLoaded: Promise<Object> | undefined;
 
-  /**
-   * Hook into LitElement to only render once all translations are loaded
-   */
-  public performUpdate(): Promise<void>;
-
   public onLocaleReady(): void;
   public onLocaleChanged(newLocale: string, oldLocale: string): void;
   public onLocaleUpdated(): void;

package/components/select-rich/src/LionSelectRich.js

@@ -489,9 +489,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
    * @param {KeyboardEvent} ev
    * @protected
    */
-  // TODO: rename to _onKeyUp in v1
+  // TODO: rename to #invokerOnKeyUp() (and move event listener to the invoker) in v1
   __onKeyUp(ev) {
-    if (this.disabled || this.readOnly) {
+    if (this.disabled || this.readOnly || this.singleOption) {
       return;
     }
 
@@ -529,6 +529,22 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
           this.opened = true;
         }
         break;
+      case 'ArrowLeft':
+        ev.preventDefault();
+        if (this.navigateWithinInvoker) {
+          this.setCheckedIndex(
+            this._getPreviousEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+          );
+        }
+        break;
+      case 'ArrowRight':
+        ev.preventDefault();
+        if (this.navigateWithinInvoker) {
+          this.setCheckedIndex(
+            this._getNextEnabledOption(/**  @type {number} */ (this.checkedIndex)),
+          );
+        }
+        break;
       default:
         if (!this._noTypeAhead) {
           this._handleTypeAhead(ev, { setAsChecked: true });