diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md index c9fcfcfd..7e8955e5 100644 --- a/COMPONENT_INDEX.md +++ b/COMPONENT_INDEX.md @@ -656,31 +656,31 @@ export interface ComboBoxItem { ### Props -| Prop name | Kind | Reactive | Type | Default value | Description | -| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | -| listRef | let | Yes | 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 | () => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; ref?.focus(); } | Clear the combo box programmatically | +| Prop name | Kind | Reactive | Type | Default value | Description | +| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| listRef | let | Yes | 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 | (options?: { focus?: boolean; }) => void | () => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); } | Clear the combo box programmatically | ### Slots diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json index 702ff96e..f67e0c4c 100644 --- a/docs/src/COMPONENT_API.json +++ b/docs/src/COMPONENT_API.json @@ -1615,8 +1615,8 @@ "name": "clear", "kind": "function", "description": "Clear the combo box programmatically", - "type": "() => void", - "value": "() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; ref?.focus(); }", + "type": "(options?: { focus?: boolean; }) => void", + "value": "() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; if (options?.focus !== false) ref?.focus(); }", "isFunction": true, "isFunctionDeclaration": true, "constant": false, diff --git a/docs/src/pages/components/ComboBox.svx b/docs/src/pages/components/ComboBox.svx index 204573bf..f40f1679 100644 --- a/docs/src/pages/components/ComboBox.svx +++ b/docs/src/pages/components/ComboBox.svx @@ -1,9 +1,6 @@ ### Default @@ -31,15 +28,11 @@ items={[ ### Clear selection - -
- +To programmatically clear the selection, access the component instance using the [bind:this](https://svelte.dev/docs#bind_element) directive and invoke the `ComboBox.clear()` accessor. + +Specify `focus: false` in the method options to avoid re-focusing the input. + + ### Multiple combo boxes diff --git a/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte new file mode 100644 index 00000000..fdb29808 --- /dev/null +++ b/docs/src/pages/framed/ComboBox/ComboBoxClear.svelte @@ -0,0 +1,20 @@ + + + +
+ + diff --git a/src/ComboBox/ComboBox.svelte b/src/ComboBox/ComboBox.svelte index 2486a72e..9576206d 100644 --- a/src/ComboBox/ComboBox.svelte +++ b/src/ComboBox/ComboBox.svelte @@ -126,9 +126,9 @@ /** * Clear the combo box programmatically - * @type {() => void} + * @type {(options?: { focus?: boolean; }) => void} */ - export function clear() { + export function clear(options = {}) { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; @@ -137,7 +137,7 @@ selectedItem = undefined; open = false; inputValue = ""; - ref?.focus(); + if (options?.focus !== false) ref?.focus(); } afterUpdate(() => { diff --git a/tests/ComboBox.test.svelte b/tests/ComboBox.test.svelte index 9ee7eb9d..9de92cee 100644 --- a/tests/ComboBox.test.svelte +++ b/tests/ComboBox.test.svelte @@ -11,6 +11,7 @@ let ref: ComboBox; let listRef: HTMLDivElement = null; + $: ref?.clear({ focus: false }); $: ref?.clear(); diff --git a/types/ComboBox/ComboBox.svelte.d.ts b/types/ComboBox/ComboBox.svelte.d.ts index eaf5a906..dceb6613 100644 --- a/types/ComboBox/ComboBox.svelte.d.ts +++ b/types/ComboBox/ComboBox.svelte.d.ts @@ -158,5 +158,5 @@ export default class ComboBox extends SvelteComponentTyped< /** * Clear the combo box programmatically */ - clear: () => void; + clear: (options?: { focus?: boolean }) => void; }