diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx
index 014769f0..b63d1c67 100644
--- a/docs/src/pages/components/ComboBox.svx
+++ b/docs/src/pages/components/ComboBox.svx
@@ -1,6 +1,9 @@
### Default
@@ -22,6 +25,17 @@ items={[
{id: "2", text: "Fax"}
]} />
+### Clear selection
+
+
+
+
### Multiple combo boxes
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 539c94f8..2f7edd86 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -123,6 +123,14 @@
highlightedIndex = index;
}
+ export function clear() {
+ selectedIndex = -1;
+ highlightedIndex = -1;
+ open = false;
+ inputValue = "";
+ ref?.focus();
+ }
+
afterUpdate(() => {
if (open) {
ref.focus();
@@ -140,6 +148,9 @@
$: if (selectedIndex > -1) {
selectedId = items[selectedIndex].id;
dispatch("select", { selectedId, selectedIndex, selectedItem });
+ } else {
+ clear();
+ dispatch("clear");
}
$: ariaLabel = $$props["aria-label"] || "Choose an item";
$: menuId = `menu-${id}`;
@@ -286,13 +297,7 @@
{#if inputValue}