diff --git a/.changeset/poor-trains-drive.md b/.changeset/poor-trains-drive.md new file mode 100644 index 000000000..c0d187105 --- /dev/null +++ b/.changeset/poor-trains-drive.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': minor +--- + +Fix: Event emited when clearing a combobox sends stale value diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js index 8e9b28112..056ed48ba 100644 --- a/packages/ui/components/combobox/src/LionCombobox.js +++ b/packages/ui/components/combobox/src/LionCombobox.js @@ -1185,8 +1185,8 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) { } clear() { - super.clear(); this.value = ''; + super.clear(); this.__shouldAutocompleteNextUpdate = true; } } diff --git a/packages/ui/components/combobox/test/lion-combobox.test.js b/packages/ui/components/combobox/test/lion-combobox.test.js index a9967ff0f..82ce91c40 100644 --- a/packages/ui/components/combobox/test/lion-combobox.test.js +++ b/packages/ui/components/combobox/test/lion-combobox.test.js @@ -453,6 +453,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` + Red + Green + Blue + `, + ) + ); + + 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`