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

fix(combobox): update option list after clear

Browse source
This commit is contained in:
gvangeest 2023-03-22 11:22:22 +01:00 committed by gerjanvangeest
parent 5516bec4ba
commit ddea63b381
3 changed files with 31 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/silver-lizards-repeat.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[combobox] update option list after clear

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

@ -1183,5 +1183,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
clear() { clear() {
super.clear(); super.clear();
this.value = ''; this.value = '';
this.__shouldAutocompleteNextUpdate = true;
} }
} }

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

@ -452,6 +452,30 @@ describe('lion-combobox', () => {
expect(el2._inputNode.value).to.equal(''); expect(el2._inputNode.value).to.equal('');
}); });
it('updates option list after clear()', async () => {
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>
`)
);
const options = el.formElements;
mimicUserTyping(el, 'a');
await el.updateComplete;
const visibleOptions = options.filter(o => o.style.display !== 'none');
expect(visibleOptions.length).to.equal(3, 'after input');
el.clear();
await el.updateComplete;
const visibleOptions2 = options.filter(o => o.style.display !== 'none');
expect(visibleOptions2.length).to.equal(0, 'after clear');
});
it('resets modelValue and textbox value on reset()', async () => { it('resets modelValue and textbox value on reset()', async () => {
const el = /** @type {LionCombobox} */ ( const el = /** @type {LionCombobox} */ (
await fixture(html` await fixture(html`
@ -923,6 +947,7 @@ describe('lion-combobox', () => {
expect(el.opened).to.equal(true); expect(el.opened).to.equal(true);
const visibleOptions = options.filter(o => o.style.display !== 'none'); const visibleOptions = options.filter(o => o.style.display !== 'none');
expect(visibleOptions.length).to.not.equal(0);
visibleOptions.forEach((o, i) => { visibleOptions.forEach((o, i) => {
expect(o.getAttribute('aria-posinset')).to.equal(`${i + 1}`); expect(o.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
expect(o.getAttribute('aria-setsize')).to.equal(`${visibleOptions.length}`); expect(o.getAttribute('aria-setsize')).to.equal(`${visibleOptions.length}`);