mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-14 18:01:06 +00:00
Add option to not re-focus ComboBox when invoking clear() (#1000)
* feat(combo-box): add option to clear accessor to not re-focus input Closes #994 * yarn build:lib * test(combo-box): validate clear accessor params * docs(combo-box): add clear without focus to "Clear selection" example
This commit is contained in:
Eric Liu
GitHub
parent
d4dd33e28c
commit
37f19d2171
7 changed files with 57 additions and 43 deletions
|
|
@ -656,31 +656,31 @@ export interface ComboBoxItem {
|
|||
|
||||
### Props
|
||||
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| listRef | <code>let</code> | Yes | <code>HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>-1</code> | Set the selected item by value index |
|
||||
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the combobox |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| shouldFilterItem | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| clear | <code>function</code> | No | <code>() => void</code> | <code>() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||
| Prop name | Kind | Reactive | Type | Default value | Description |
|
||||
| :--------------- | :-------------------- | :------- | :---------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
|
||||
| listRef | <code>let</code> | Yes | <code>HTMLDivElement</code> | <code>null</code> | Obtain a reference to the list HTML element |
|
||||
| ref | <code>let</code> | Yes | <code>null | HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element |
|
||||
| open | <code>let</code> | Yes | <code>boolean</code> | <code>false</code> | Set to `true` to open the combobox menu dropdown |
|
||||
| value | <code>let</code> | Yes | <code>string</code> | <code>""</code> | Specify the selected combobox value |
|
||||
| selectedIndex | <code>let</code> | Yes | <code>number</code> | <code>-1</code> | Set the selected item by value index |
|
||||
| items | <code>let</code> | No | <code>ComboBoxItem[]</code> | <code>[]</code> | Set the combobox items |
|
||||
| itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text || item.id</code> | Override the display of a combobox item |
|
||||
| direction | <code>let</code> | No | <code>"bottom" | "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
|
||||
| size | <code>let</code> | No | <code>"sm" | "xl"</code> | -- | Set the size of the combobox |
|
||||
| disabled | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to disable the combobox |
|
||||
| titleText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the title text of the combobox |
|
||||
| placeholder | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the placeholder text |
|
||||
| helperText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the helper text |
|
||||
| invalidText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the invalid state text |
|
||||
| invalid | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an invalid state |
|
||||
| warn | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to indicate an warning state |
|
||||
| warnText | <code>let</code> | No | <code>string</code> | <code>""</code> | Specify the warning state text |
|
||||
| light | <code>let</code> | No | <code>boolean</code> | <code>false</code> | Set to `true` to enable the light variant |
|
||||
| shouldFilterItem | <code>let</code> | No | <code>(item: ComboBoxItem, value: string) => boolean</code> | <code>() => true</code> | Determine if an item should be filtered given the current combobox value |
|
||||
| translateWithId | <code>let</code> | No | <code>(id: any) => string</code> | -- | Override the default translation ids |
|
||||
| id | <code>let</code> | No | <code>string</code> | <code>"ccs-" + Math.random().toString(36)</code> | Set an id for the list box component |
|
||||
| name | <code>let</code> | No | <code>string</code> | -- | Specify a name attribute for the input |
|
||||
| clear | <code>function</code> | No | <code>(options?: { focus?: boolean; }) => void</code> | <code>() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = ""; if (options?.focus !== false) ref?.focus(); }</code> | Clear the combo box programmatically |
|
||||
|
||||
### Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,6 @@
|
|||
<script>
|
||||
import { ComboBox } from "carbon-components-svelte";
|
||||
import { Button } from "carbon-components-svelte";
|
||||
import Preview from "../../components/Preview.svelte";
|
||||
let comboboxComponent
|
||||
let selectedIndex = 1
|
||||
</script>
|
||||
|
||||
### Default
|
||||
|
|
@ -31,15 +28,11 @@ items={[
|
|||
|
||||
### Clear selection
|
||||
|
||||
<ComboBox titleText="Contact" placeholder="Select contact method"
|
||||
bind:this={comboboxComponent}
|
||||
items={[
|
||||
{id: "0", text: "Slack"},
|
||||
{id: "1", text: "Email"},
|
||||
{id: "2", text: "Fax"}
|
||||
]} />
|
||||
<br>
|
||||
<Button on:click={comboboxComponent.clear}>Clear</Button>
|
||||
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.
|
||||
|
||||
<FileSource src="/framed/ComboBox/ComboBoxClear" />
|
||||
|
||||
### Multiple combo boxes
|
||||
|
||||
|
|
|
|||
20
docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
Normal file
20
docs/src/pages/framed/ComboBox/ComboBoxClear.svelte
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<script>
|
||||
import { ComboBox, Button } from "carbon-components-svelte";
|
||||
|
||||
let ref;
|
||||
</script>
|
||||
|
||||
<ComboBox
|
||||
titleText="Contact"
|
||||
placeholder="Select contact method"
|
||||
selectedIndex="{1}"
|
||||
bind:this="{ref}"
|
||||
items="{[
|
||||
{ id: '0', text: 'Slack' },
|
||||
{ id: '1', text: 'Email' },
|
||||
{ id: '2', text: 'Fax' },
|
||||
]}"
|
||||
/>
|
||||
<br />
|
||||
<Button on:click="{ref.clear}">Clear</Button>
|
||||
<Button on:click="{() => ref.clear({ focus: false })}">Clear (no focus)</Button>
|
||||
|
|
@ -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(() => {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
let ref: ComboBox;
|
||||
let listRef: HTMLDivElement = null;
|
||||
|
||||
$: ref?.clear({ focus: false });
|
||||
$: ref?.clear();
|
||||
</script>
|
||||
|
||||
|
|
|
|||
2
types/ComboBox/ComboBox.svelte.d.ts
vendored
2
types/ComboBox/ComboBox.svelte.d.ts
vendored
|
|
@ -158,5 +158,5 @@ export default class ComboBox extends SvelteComponentTyped<
|
|||
/**
|
||||
* Clear the combo box programmatically
|
||||
*/
|
||||
clear: () => void;
|
||||
clear: (options?: { focus?: boolean }) => void;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue