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}