fix: autocomplete for combobox (reset activeIndex when needed)

ing-bank · Nov 7, 2023 · c459ded · c459ded
1 parent db2ab59
commit c459ded
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/.changeset/unlucky-owls-search.md b/.changeset/unlucky-owls-search.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+Fixed autocomplete feature for the lion-combobox component. It used to autoselect a wrong item
diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js
@@ -955,6 +955,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);
     }
 

diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js
@@ -1330,6 +1330,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`