@lion/ui 0.4.1 → 0.5.0

package/components/calendar/src/LionCalendar.js

@@ -799,7 +799,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
    * @private
    */
   __clickDateDelegation(ev) {
-    const el = /** @type {HTMLElement & { date: Date }} */ (ev.target);
+    const el = /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]);
     if (isDayButton(el) && !isDisabledDayButton(el)) {
       this.__dateSelectedByUser(el.date);
     }
@@ -815,7 +815,7 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     ) {
       this.__focusedDate = /** @type {HTMLButtonElement & { date: Date }} */ (
         this.shadowRoot?.activeElement
-      ).date;
+      )?.date;
     }
   }
 
@@ -866,7 +866,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     switch (ev.key) {
       case ' ':
       case 'Enter':
-        this.__dayButtonSelection(/** @type {HTMLElement & { date: Date }} */ (ev.target));
+        this.__dayButtonSelection(
+          /** @type {HTMLElement & { date: Date }} */ (ev.composedPath()[0]),
+        );
         break;
       case 'ArrowUp':
         this.__modifyDate(-7, { dateType: '__focusedDate', type: 'Date' });

package/components/calendar/test-helpers/DayObject.js

@@ -63,7 +63,7 @@ export class DayObject {
 
   get weekdayNameShort() {
     const weekdayEls = Array.from(
-      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement).querySelectorAll(
+      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
         '.calendar__day-cell',
       ),
     );
@@ -73,7 +73,7 @@ export class DayObject {
 
   get weekdayNameLong() {
     const weekdayEls = Array.from(
-      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement).querySelectorAll(
+      /** @type {HTMLElement} */ (this.el.parentElement?.parentElement)?.querySelectorAll(
         '.calendar__day-cell',
       ),
     );

package/components/combobox/src/LionCombobox.js

@@ -6,6 +6,7 @@ import { OverlayMixin, withDropdownConfig } from '@lion/ui/overlays.js';
 import { css, html } from 'lit';
 import { makeMatchingTextBold, unmakeMatchingTextBold } from './utils/makeMatchingTextBold.js';
 import { MatchesOption } from './validators.js';
+import { CustomChoiceGroupMixin } from '../../form-core/src/choice-group/CustomChoiceGroupMixin.js';
 
 const matchA11ySpanReverseFns = new WeakMap();
 
@@ -27,7 +28,7 @@ const matchA11ySpanReverseFns = new WeakMap();
  * LionCombobox: implements the wai-aria combobox design pattern and integrates it as a Lion
  * FormControl
  */
-export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
+export class LionCombobox extends LocalizeMixin(OverlayMixin(CustomChoiceGroupMixin(LionListbox))) {
   /** @type {any} */
   static get properties() {
     return {
@@ -43,6 +44,10 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
       requireOptionMatch: {
         type: Boolean,
       },
+      allowCustomChoice: {
+        type: Boolean,
+        attribute: 'allow-custom-choice',
+      },
       __shouldAutocompleteNextUpdate: Boolean,
     };
   }
@@ -316,7 +321,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
    */
   get _inputNode() {
     if (this._ariaVersion === '1.1' && this._comboboxNode) {
-      return /** @type {HTMLInputElement} */ (this._comboboxNode.querySelector('input'));
+      return /** @type {HTMLInputElement} */ (
+        this._comboboxNode.querySelector('input') || this._comboboxNode
+      );
     }
     return /** @type {HTMLInputElement} */ (this._comboboxNode);
   }
@@ -364,6 +371,20 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
     return this._inputNode;
   }
 
+  /**
+   * @returns {boolean}
+   */
+  get requireOptionMatch() {
+    return !this.allowCustomChoice;
+  }
+
+  /**
+   * @param {boolean} value
+   */
+  set requireOptionMatch(value) {
+    this.allowCustomChoice = !value;
+  }
+
   constructor() {
     super();
     /**
@@ -486,14 +507,20 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
 
   /**
    * Converts viewValue to modelValue
-   * @param {string} value - viewValue: the formatted value inside <input>
+   * @override CustomChoiceGroupMixin
+   * @param {string|string[]} value - viewValue: the formatted value inside <input>
    * @returns {*} modelValue
    */
   parser(value) {
-    if (this.requireOptionMatch && this.checkedIndex === -1 && value !== '') {
+    if (
+      this.requireOptionMatch &&
+      this.checkedIndex === -1 &&
+      value !== '' &&
+      !Array.isArray(value)
+    ) {
       return new Unparseable(value);
     }
-    return value;
+    return super.parser(value);
   }
 
   /**
@@ -554,15 +581,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
     if (typeof this._selectionDisplayNode?.onComboboxElementUpdated === 'function') {
       this._selectionDisplayNode.onComboboxElementUpdated(changedProperties);
     }
-
-    if (changedProperties.has('requireOptionMatch') || changedProperties.has('multipleChoice')) {
-      if (!this.requireOptionMatch && this.multipleChoice) {
-        // TODO implement !requireOptionMatch and multipleChoice flow
-        throw new Error(
-          "multipleChoice and requireOptionMatch=false can't be used at the same time (yet).",
-        );
-      }
-    }
   }
 
   /**
@@ -697,8 +715,8 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
    * @protected
    */
   _setTextboxValue(v) {
-    // Make sure that we don't loose inputNode.selectionStart and inputNode.selectionEnd
-    if (this._inputNode.value !== v) {
+    // Make sure that we don't lose inputNode.selectionStart and inputNode.selectionEnd
+    if (this._inputNode && this._inputNode.value !== v) {
       this._inputNode.value = v;
     }
   }
@@ -849,7 +867,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
    * @protected
    */
   _handleAutocompletion() {
-    const hasSelection = this._inputNode.value.length !== this._inputNode.selectionStart;
+    const isSelectionEmpty = this._inputNode.selectionStart === this._inputNode.selectionEnd;
+    const hasSelection =
+      !isSelectionEmpty && this._inputNode.value.length !== this._inputNode.selectionStart;
 
     const inputValue = this._inputNode.value;
     const inputSelectionStart = this._inputNode.selectionStart;
@@ -953,6 +973,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
     if (autoselect && !hasAutoFilled && !this.multipleChoice) {
       // This means there is no match for checkedIndex
       this.setCheckedIndex(-1);
+      if (prevValue !== curValue) {
+        this.activeIndex = -1;
+      }
       this.modelValue = this.parser(inputValue);
     }
 
@@ -1063,25 +1086,52 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
    * @protected
    */
   _listboxOnKeyDown(ev) {
-    super._listboxOnKeyDown(ev);
     const { key } = ev;
     switch (key) {
       case 'Escape':
         this.opened = false;
+        super._listboxOnKeyDown(ev);
         this._setTextboxValue('');
         break;
+      case 'Backspace':
+      case 'Delete':
+        if (this.requireOptionMatch) {
+          super._listboxOnKeyDown(ev);
+        } else {
+          this.opened = false;
+        }
+        break;
       case 'Enter':
         if (this.multipleChoice && this.opened) {
           ev.preventDefault();
         }
-        if (!this.formElements[this.activeIndex]) {
-          return;
+
+        if (
+          !this.requireOptionMatch &&
+          this.multipleChoice &&
+          (!this.formElements[this.activeIndex] ||
+            this.formElements[this.activeIndex].hasAttribute('aria-hidden') ||
+            !this.opened)
+        ) {
+          ev.preventDefault();
+
+          this.modelValue = this.parser([...this.modelValue, this._inputNode.value]);
+
+          this._inputNode.value = '';
+          this.opened = false;
+        } else {
+          super._listboxOnKeyDown(ev);
+          // TODO: should we clear the input value here when allowCustomChoice is false?
+          // For now, we don't...
         }
         if (!this.multipleChoice) {
           this.opened = false;
         }
         break;
-      /* no default */
+      default: {
+        super._listboxOnKeyDown(ev);
+        break;
+      }
     }
   }
 
@@ -1108,12 +1158,14 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
    */
   // eslint-disable-next-line no-unused-vars
   _syncToTextboxMultiple(modelValue, oldModelValue = []) {
-    const diff = modelValue.filter(x => !oldModelValue.includes(x));
-    const newValue = this.formElements
-      .filter(option => diff.includes(option.choiceValue))
-      .map(option => this._getTextboxValueFromOption(option))
-      .join(' ');
-    this._setTextboxValue(newValue); // or last selected value?
+    if (this.requireOptionMatch) {
+      const diff = modelValue.filter(x => !oldModelValue.includes(x));
+      const newValue = this.formElements
+        .filter(option => diff.includes(option.choiceValue))
+        .map(option => this._getTextboxValueFromOption(option))
+        .join(' ');
+      this._setTextboxValue(newValue); // or last selected value?
+    }
   }
 
   /**
@@ -1145,11 +1197,12 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
 
     this._comboboxNode.setAttribute('role', 'combobox');
     this._comboboxNode.setAttribute('aria-haspopup', 'listbox');
+
     this._inputNode.setAttribute('aria-autocomplete', this.autocomplete);
+    this._comboboxNode.setAttribute('aria-controls', this._listboxNode.id);
 
     if (this._ariaVersion === '1.1') {
       this._comboboxNode.setAttribute('aria-owns', this._listboxNode.id);
-      this._inputNode.setAttribute('aria-controls', this._listboxNode.id);
     } else {
       this._inputNode.setAttribute('aria-owns', this._listboxNode.id);
     }
@@ -1183,8 +1236,8 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
   }
 
   clear() {
-    super.clear();
     this.value = '';
+    super.clear();
     this.__shouldAutocompleteNextUpdate = true;
   }
 }

package/components/combobox/test/lion-combobox-integrations.test.js

@@ -1,4 +1,9 @@
 import { runListboxMixinSuite } from '@lion/ui/listbox-test-suites.js';
 import '@lion/ui/define/lion-combobox.js';
+import { runCustomChoiceGroupMixinSuite } from '../../form-core/test-suites/choice-group/CustomChoiceGroupMixin.suite.js';
 
 runListboxMixinSuite({ tagString: 'lion-combobox' });
+runCustomChoiceGroupMixinSuite({
+  parentTagString: 'lion-combobox',
+  childTagString: 'lion-option',
+});

package/components/combobox/test/lion-combobox.test.js

@@ -395,29 +395,6 @@ describe('lion-combobox', () => {
       expect(el.formElements[0].checked).to.be.false;
     });
 
-    it('multiple choice and requireOptionMatch is false do not work together yet', async () => {
-      const errorMessage = `multipleChoice and requireOptionMatch=false can't be used at the same time (yet).`;
-      let error;
-      const el = /** @type {LionCombobox} */ (
-        await fixture(html`
-          <lion-combobox name="foo" multiple-choice>
-            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
-            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
-            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
-            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
-          </lion-combobox>
-        `)
-      );
-      try {
-        el.requireOptionMatch = false;
-        await el.updateComplete;
-      } catch (err) {
-        error = err;
-      }
-      expect(error).to.be.instanceOf(Error);
-      expect(/** @type {Error} */ (error).message).to.equal(errorMessage);
-    });
-
     it('clears modelValue and textbox value on clear()', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -453,6 +430,32 @@ describe('lion-combobox', () => {
       expect(el2._inputNode.value).to.equal('');
     });
 
+    it('correctly emits event with an empty value when clear() is called', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(
+          html`<lion-combobox>
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'green'}>Green</lion-option>
+            <lion-option .choiceValue=${'blue'}>Blue</lion-option>
+          </lion-combobox>`,
+        )
+      );
+
+      el.modelValue = 'red';
+      await el.updateComplete;
+
+      el.addEventListener('model-value-changed', ({ target }) => {
+        expect(target).to.not.be.null;
+
+        const { modelValue, value } = /** @type {LionCombobox} */ (target);
+        expect(value).to.equal('');
+        expect(modelValue).to.equal('');
+      });
+
+      el.clear();
+      await el.updateComplete;
+    });
+
     it('updates option list after clear()', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -565,6 +568,33 @@ describe('lion-combobox', () => {
       expect(el.showsFeedbackFor).to.include('error', 'showsFeedbackFor');
     });
 
+    it('ignores empty string modelValue inputs', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" multiple-choice autocomplete="none">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      el.requireOptionMatch = false;
+      await el.updateComplete;
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+      expect(el.modelValue).to.eql([]);
+
+      mimicUserTyping(el, ' ');
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+      expect(el.modelValue).to.eql([]);
+    });
+
     it('allows a value outside of the option list when requireOptionMatch is false', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -589,6 +619,35 @@ describe('lion-combobox', () => {
       expect(_inputNode.value).to.equal('Foo');
     });
 
+    it("doesn't select any similar options after using delete when requireOptionMatch is false", async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" .validators=${[new Required()]}>
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+      el.requireOptionMatch = false;
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'Art');
+      await el.updateComplete;
+
+      await mimicUserTypingAdvanced(el, ['Delete']);
+      await el.updateComplete;
+      await el.updateComplete;
+
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+
+      expect(el.checkedIndex).to.equal(-1);
+      expect(el.modelValue).to.equal('Art');
+      expect(_inputNode.value).to.equal('Art');
+    });
+
     it("when removing a letter it won't select the option", async () => {
       // We don't autocomplete when characters are removed
       const el = /** @type {LionCombobox} */ (
@@ -641,6 +700,173 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.equal('Foo');
       expect(el.formElements[0].checked).to.be.false;
     });
+
+    it('allows custom selections when multi-choice when requireOptionMatch is false', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox
+            name="foo"
+            multiple-choice
+            .validators=${[new Required()]}
+            autocomplete="none"
+          >
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option checked .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      el.requireOptionMatch = false;
+      await el.updateComplete;
+
+      const { _inputNode } = getComboboxMembers(el);
+      expect(el.modelValue).to.eql(['Chard']);
+      expect(el.checkedIndex).to.eql([1]);
+
+      mimicUserTyping(el, 'Foo');
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+
+      expect(el.modelValue).to.eql(['Chard', 'Foo']);
+      expect(el.checkedIndex).to.eql([1]);
+
+      mimicUserTyping(el, 'Bar');
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+    });
+
+    it('allows manyu custom selections when multi-choice when requireOptionMatch is false', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox
+            name="foo"
+            multiple-choice
+            .validators=${[new Required()]}
+            autocomplete="none"
+          >
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      el.requireOptionMatch = false;
+      await el.updateComplete;
+
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'Foo');
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+
+      expect(el.modelValue).to.eql(['Foo']);
+      expect(el.checkedIndex).to.eql([]);
+
+      mimicUserTyping(el, 'Bar');
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+
+      expect(el.modelValue).to.eql(['Foo', 'Bar']);
+      expect(el.checkedIndex).to.eql([]);
+    });
+
+    it('allows new options when multi-choice when requireOptionMatch=false and autocomplete="both", without selecting similar values', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox
+            name="foo"
+            multiple-choice
+            .requireOptionMatch=${false}
+            autocomplete="both"
+          >
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      await el.updateComplete;
+
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'Artist');
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+
+      expect(el.modelValue).to.eql(['Artist']);
+    });
+
+    it('allows new options when multi-choice when requireOptionMatch=false and autocomplete="both", when deleting autocomplete values using Backspace', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox
+            name="foo"
+            multiple-choice
+            .requireOptionMatch=${false}
+            autocomplete="both"
+          >
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      await el.updateComplete;
+
+      const { _inputNode } = getComboboxMembers(el);
+      mimicUserTyping(el, 'Art');
+      await el.updateComplete;
+      await mimicUserTypingAdvanced(el, ['Backspace']);
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+
+      expect(el.modelValue).to.eql(['Art']);
+    });
+
+    it('allows new custom options when multi-choice when requireOptionMatch=false and autocomplete="both", when deleting autocompleted values using Delete', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox
+            name="foo"
+            multiple-choice
+            .requireOptionMatch=${false}
+            autocomplete="both"
+          >
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      await el.updateComplete;
+
+      const { _inputNode } = getComboboxMembers(el);
+      el.modelValue = [];
+
+      mimicUserTyping(el, 'Art');
+      await el.updateComplete;
+      await mimicUserTypingAdvanced(el, ['Delete']);
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+      expect(el.modelValue).to.eql(['Art']);
+    });
   });
 
   describe('Overlay visibility', () => {
@@ -1304,6 +1530,47 @@ describe('lion-combobox', () => {
       ]);
     });
 
+    it('does not autocomplete on [Enter] when textbox content does not match options', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Mango'}">Mango</lion-option>
+            <lion-option .choiceValue="${'Lemon'}">Lemon</lion-option>
+            <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const { _inputNode } = getComboboxMembers(el);
+      mimicUserTypingAdvanced(el, ['m', 'a', 'k']);
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+      await el.updateComplete;
+      expect(_inputNode.value).to.equal('Mak');
+    });
+
+    it('does not autocomplete on [Enter] when textbox content does not match options and content was cleared via [Backspace]', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo">
+            <lion-option .choiceValue="${'Mango'}">Mango</lion-option>
+            <lion-option .choiceValue="${'Lemon'}">Lemon</lion-option>
+            <lion-option .choiceValue="${'Apple'}">Apple</lion-option>
+          </lion-combobox>
+        `)
+      );
+      const { _inputNode } = getComboboxMembers(el);
+      mimicUserTypingAdvanced(el, ['m', 'o', 'Backspace', 'Backspace', 'm', 'o']);
+      await el.updateComplete;
+      await el.updateComplete;
+      await el.updateComplete;
+      await el.updateComplete;
+      mimicKeyPress(_inputNode, 'Enter');
+      await el.updateComplete;
+      await el.updateComplete;
+      expect(_inputNode.value).to.equal('Mo');
+    });
+
     it('does not filter options when autocomplete is "inline"', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -1610,6 +1877,34 @@ describe('lion-combobox', () => {
       expect(el.checkedIndex).to.equal(0);
     });
 
+    it('filters options correctly when changing the middle of the word', async () => {
+      const el = /** @type {LionCombobox} */ (
+        await fixture(html`
+          <lion-combobox name="foo" autocomplete="list" match-mode="all">
+            <lion-option .choiceValue="${'Artichoke'}">Artichoke</lion-option>
+            <lion-option .choiceValue="${'Chard'}">Chard</lion-option>
+            <lion-option .choiceValue="${'Chicory'}">Chicory</lion-option>
+            <lion-option .choiceValue="${'Victoria Plum'}">Victoria Plum</lion-option>
+          </lion-combobox>
+        `)
+      );
+
+      const { _inputNode } = getComboboxMembers(el);
+
+      mimicUserTyping(el, 'char');
+      expect(_inputNode.value).to.equal('char');
+      await el.updateComplete; // Char
+
+      expect(getFilteredOptionValues(el)).to.eql(['Chard']);
+
+      _inputNode.setSelectionRange(3, 3);
+      await mimicUserTypingAdvanced(el, ['Backspace', 'i', 'c', 'o']);
+      await el.updateComplete; // Chicor
+
+      expect(_inputNode.value).to.equal('chicor');
+      expect(getFilteredOptionValues(el)).to.eql(['Chicory']);
+    });
+
     it('computation of "user intends autofill" works correctly afer autofill', async () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`