diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 95808fd5..f32a8043 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -654,30 +654,31 @@ export interface ComboBoxItem {
### Props
-| Prop name | Kind | Reactive | Type | Default value | Description |
-| :--------------- | :--------------- | :------- | :---------------------------------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------------------ |
-| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element |
-| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
-| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
-| value | let | Yes | string | "" | Specify the selected combobox value |
-| selectedIndex | let | Yes | number | -1 | Set the selected item by value index |
-| items | let | No | ComboBoxItem[] | [] | Set the combobox items |
-| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
-| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
-| size | let | No | "sm" | "xl" | -- | Set the size of the combobox |
-| disabled | let | No | boolean | false | Set to `true` to disable the combobox |
-| titleText | let | No | string | "" | Specify the title text of the combobox |
-| placeholder | let | No | string | "" | Specify the placeholder text |
-| helperText | let | No | string | "" | Specify the helper text |
-| invalidText | let | No | string | "" | Specify the invalid state text |
-| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
-| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
-| warnText | let | No | string | "" | Specify the warning state text |
-| light | let | No | boolean | false | Set to `true` to enable the light variant |
-| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
-| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
-| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
-| name | let | No | string | -- | Specify a name attribute for the input |
+| Prop name | Kind | Reactive | Type | Default value | Description |
+| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| listRef | let | Yes | null | HTMLDivElement | null | Obtain a reference to the list HTML element |
+| ref | let | Yes | null | HTMLInputElement | null | Obtain a reference to the input HTML element |
+| open | let | Yes | boolean | false | Set to `true` to open the combobox menu dropdown |
+| value | let | Yes | string | "" | Specify the selected combobox value |
+| selectedIndex | let | Yes | number | -1 | Set the selected item by value index |
+| items | let | No | ComboBoxItem[] | [] | Set the combobox items |
+| itemToString | let | No | (item: ComboBoxItem) => string | (item) => item.text || item.id | Override the display of a combobox item |
+| direction | let | No | "bottom" | "top" | "bottom" | Specify the direction of the combobox dropdown menu |
+| size | let | No | "sm" | "xl" | -- | Set the size of the combobox |
+| disabled | let | No | boolean | false | Set to `true` to disable the combobox |
+| titleText | let | No | string | "" | Specify the title text of the combobox |
+| placeholder | let | No | string | "" | Specify the placeholder text |
+| helperText | let | No | string | "" | Specify the helper text |
+| invalidText | let | No | string | "" | Specify the invalid state text |
+| invalid | let | No | boolean | false | Set to `true` to indicate an invalid state |
+| warn | let | No | boolean | false | Set to `true` to indicate an warning state |
+| warnText | let | No | string | "" | Specify the warning state text |
+| light | let | No | boolean | false | Set to `true` to enable the light variant |
+| shouldFilterItem | let | No | (item: ComboBoxItem, value: string) => boolean | () => true | Determine if an item should be filtered given the current combobox value |
+| translateWithId | let | No | (id: any) => string | -- | Override the default translation ids |
+| id | let | No | string | "ccs-" + Math.random().toString(36) | Set an id for the list box component |
+| name | let | No | string | -- | Specify a name attribute for the input |
+| clear | function | No | () => void | () => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = ""; ref?.focus(); } | Clear the combo box programmatically |
### Slots
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index e2bd1683..25b206a5 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -1588,6 +1588,17 @@
"isFunctionDeclaration": false,
"constant": false,
"reactive": true
+ },
+ {
+ "name": "clear",
+ "kind": "function",
+ "description": "Clear the combo box programmatically",
+ "type": "() => void",
+ "value": "() => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = \"\"; ref?.focus(); }",
+ "isFunction": true,
+ "isFunctionDeclaration": true,
+ "constant": false,
+ "reactive": false
}
],
"slots": [],
diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte
index 2f7edd86..0c85abd4 100644
--- a/src/ComboBox/ComboBox.svelte
+++ b/src/ComboBox/ComboBox.svelte
@@ -123,6 +123,10 @@
highlightedIndex = index;
}
+ /**
+ * Clear the combo box programmatically
+ * @type {() => void}
+ */
export function clear() {
selectedIndex = -1;
highlightedIndex = -1;
diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte
index d38b0344..670ce5c5 100644
--- a/tests/ComboBox.test.svelte
+++ b/tests/ComboBox.test.svelte
@@ -7,9 +7,14 @@
{ id: "1", text: "Email" },
{ id: "2", text: "Fax" },
];
+
+ let ref: ComboBox;
+
+ $: ref?.clear();
{}
+> {
+ /**
+ * Clear the combo box programmatically
+ * @default () => { selectedIndex = -1; highlightedIndex = -1; open = false; inputValue = ""; ref?.focus(); }
+ */
+ clear: () => void;
+}