From 0dc706b6f922e1d6077e6cc709f9ac1b43c9d6b6 Mon Sep 17 00:00:00 2001
From: realfighter92 <63035357+realfighter92@users.noreply.github.com>
Date: Thu, 8 Apr 2021 16:07:08 +0530
Subject: [PATCH] fix: combobox clear function (#1315)

* fix(combobox): clear() method

Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>
---
 .changeset/nervous-paws-tease.md             |  5 ++++
 packages/combobox/src/LionCombobox.js        |  5 ++++
 packages/combobox/test/lion-combobox.test.js | 30 ++++++++++++++++++++
 packages/listbox/src/ListboxMixin.js         |  5 ++++
 4 files changed, 45 insertions(+)
 create mode 100644 .changeset/nervous-paws-tease.md

diff --git a/.changeset/nervous-paws-tease.md b/.changeset/nervous-paws-tease.md
new file mode 100644
index 000000000..a2e9a830a
--- /dev/null
+++ b/.changeset/nervous-paws-tease.md
@@ -0,0 +1,5 @@
+---
+'@lion/combobox': patch
+---
+
+Add clear() function combobox
diff --git a/packages/combobox/src/LionCombobox.js b/packages/combobox/src/LionCombobox.js
index 9fe2cb97f..9f150c977 100644
--- a/packages/combobox/src/LionCombobox.js
+++ b/packages/combobox/src/LionCombobox.js
@@ -892,4 +892,9 @@ export class LionCombobox extends OverlayMixin(LionListbox) {
       currentValue: this._inputNode.value,
     });
   }
+
+  clear() {
+    super.clear();
+    this._inputNode.value = '';
+  }
 }
diff --git a/packages/combobox/test/lion-combobox.test.js b/packages/combobox/test/lion-combobox.test.js
index 95e85b776..49e39c5af 100644
--- a/packages/combobox/test/lion-combobox.test.js
+++ b/packages/combobox/test/lion-combobox.test.js
@@ -317,6 +317,36 @@ describe('lion-combobox', () => {
       expect(el.modelValue).to.eql([]);
       expect(el.formElements[0].checked).to.be.false;
     });
+
+    it('clears modelValue and textbox value on clear()', async () => {
+      const el = /** @type {LionCombobox} */ (await fixture(html`
+        <lion-combobox name="foo" .modelValue="${'Artichoke'}">
+          <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 { inputNode } = getProtectedMembers(el);
+
+      el.clear();
+      expect(el.modelValue).to.equal('');
+      expect(inputNode.value).to.equal('');
+
+      const el2 = /** @type {LionCombobox} */ (await fixture(html`
+        <lion-combobox name="foo" multiple-choice .modelValue="${['Artichoke']}">
+          <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>
+      `));
+
+      el2.clear();
+      expect(el2.modelValue).to.eql([]);
+      expect(inputNode.value).to.equal('');
+    });
   });
 
   describe('Overlay visibility', () => {
diff --git a/packages/listbox/src/ListboxMixin.js b/packages/listbox/src/ListboxMixin.js
index 0d79d39a8..b6e98b9ec 100644
--- a/packages/listbox/src/ListboxMixin.js
+++ b/packages/listbox/src/ListboxMixin.js
@@ -443,6 +443,11 @@ const ListboxMixinImplementation = superclass =>
       this.resetInteractionState();
     }
 
+    clear() {
+      this.setCheckedIndex(-1);
+      this.resetInteractionState();
+    }
+
     /**
      * @override ChoiceGroupMixin: in the select disabled options are still going to a possible
      * value, for example when prefilling or programmatically setting it.