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`
+
+ Artichoke
+ Chard
+ Chicory
+ Victoria Plum
+
+ `));
+
+ const { inputNode } = getProtectedMembers(el);
+
+ el.clear();
+ expect(el.modelValue).to.equal('');
+ expect(inputNode.value).to.equal('');
+
+ const el2 = /** @type {LionCombobox} */ (await fixture(html`
+
+ Artichoke
+ Chard
+ Chicory
+ Victoria Plum
+
+ `));
+
+ 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.