fix: combobox clear function (#1315)

* fix(combobox): clear() method

Co-authored-by: Thijs Louisse <Thijs.Louisse@ing.com>

.changeset/nervous-paws-tease.md

@@ -0,0 +1,5 @@
+---
+'@lion/combobox': patch
+---
+
+Add clear() function combobox

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 = '';
+  }
 }

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', () => {

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.