fix(lion-combobox): The event emitted during clear has stale value (#2104)

.changeset/poor-trains-drive.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': minor
+---
+
+Fix: Event emited when clearing a combobox sends stale value

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;
   }
 }

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`<lion-combobox>
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'green'}>Green</lion-option>
+            <lion-option .choiceValue=${'blue'}>Blue</lion-option>
+          </lion-combobox>`,
+        )
+      );
+
+      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`