diff --git a/.changeset/unlucky-owls-search.md b/.changeset/unlucky-owls-search.md new file mode 100644 index 0000000000..a9e210021f --- /dev/null +++ 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 index 056ed48ba9..40c4c20ba6 100644 --- 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 index 82ce91c40d..d4eeff44de 100644 --- 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` + + Mango + Lemon + Apple + + `) + ); + 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` + + Mango + Lemon + Apple + + `) + ); + 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`