From ddea63b381f436277c063ae15d227fb2e91e767d Mon Sep 17 00:00:00 2001
From: gvangeest <gerjan.van.geest@ing.com>
Date: Wed, 22 Mar 2023 11:22:22 +0100
Subject: [PATCH] fix(combobox): update option list after clear

---
 .changeset/silver-lizards-repeat.md           |  5 ++++
 .../components/combobox/src/LionCombobox.js   |  1 +
 .../combobox/test/lion-combobox.test.js       | 25 +++++++++++++++++++
 3 files changed, 31 insertions(+)
 create mode 100644 .changeset/silver-lizards-repeat.md

diff --git a/.changeset/silver-lizards-repeat.md b/.changeset/silver-lizards-repeat.md
new file mode 100644
index 000000000..8d2efacb9
--- /dev/null
+++ b/.changeset/silver-lizards-repeat.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[combobox] update option list after clear
diff --git a/packages/ui/components/combobox/src/LionCombobox.js b/packages/ui/components/combobox/src/LionCombobox.js
index 80412f46e..6777edf9a 100644
--- a/packages/ui/components/combobox/src/LionCombobox.js
+++ b/packages/ui/components/combobox/src/LionCombobox.js
@@ -1183,5 +1183,6 @@ export class LionCombobox extends LocalizeMixin(OverlayMixin(LionListbox)) {
   clear() {
     super.clear();
     this.value = '';
+    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 b3e60a6ea..5b20619da 100644
--- a/packages/ui/components/combobox/test/lion-combobox.test.js
+++ b/packages/ui/components/combobox/test/lion-combobox.test.js
@@ -452,6 +452,30 @@ describe('lion-combobox', () => {
       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 () => {
       const el = /** @type {LionCombobox} */ (
         await fixture(html`
@@ -923,6 +947,7 @@ describe('lion-combobox', () => {
         expect(el.opened).to.equal(true);
 
         const visibleOptions = options.filter(o => o.style.display !== 'none');
+        expect(visibleOptions.length).to.not.equal(0);
         visibleOptions.forEach((o, i) => {
           expect(o.getAttribute('aria-posinset')).to.equal(`${i + 1}`);
           expect(o.getAttribute('aria-setsize')).to.equal(`${visibleOptions.length}`);