ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: autocomplete for combobox (reset activeIndex when needed)

Browse source
This commit is contained in:
Oleksii Kadurin 2023-11-07 12:58:59 +01:00 committed by GitHub
parent db2ab59aeb
commit c459ded9d8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 49 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/unlucky-owls-search.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Fixed autocomplete feature for the lion-combobox component. It used to autoselect a wrong item

3
packages/ui/components/combobox/src/LionCombobox.js
View file

@ -955,6 +955,9 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
if (autoselect && !hasAutoFilled && !this.multipleChoice) { if (autoselect && !hasAutoFilled && !this.multipleChoice) {
// This means there is no match for checkedIndex // This means there is no match for checkedIndex
this.setCheckedIndex(-1); this.setCheckedIndex(-1);
if (prevValue !== curValue) {
this.activeIndex = -1;
}
this.modelValue = this.parser(inputValue); this.modelValue = this.parser(inputValue);
} }

41
packages/ui/components/combobox/test/lion-combobox.test.js
View file

@ -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 () => { it('does not filter options when autocomplete is "inline"', async () => {
const el = /** @type {LionCombobox} */ ( const el = /** @type {LionCombobox} */ (
await fixture(html` await fixture(html`