mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-14 18:01:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add option to not re-focus ComboBox when invoking clear() (#1000)

Browse source 
* 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 2022-01-12 16:12:43 -10:00 • committed by GitHub
commit 37f19d2171
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 57 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

50
COMPONENT_INDEX.md
View file

@ -656,31 +656,31 @@ export interface ComboBoxItem {
### Props ### Props
| Prop name | Kind | Reactive | Type | Default value | Description | | 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 | | 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 &#124; HTMLInputElement</code> | <code>null</code> | Obtain a reference to the input HTML element | | ref | <code>let</code> | Yes | <code>null &#124; 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 | | 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 | | 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 | | 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 | | 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 &#124;&#124; item.id</code> | Override the display of a combobox item | | itemToString | <code>let</code> | No | <code>(item: ComboBoxItem) => string</code> | <code>(item) => item.text &#124;&#124; item.id</code> | Override the display of a combobox item |
| direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu | | direction | <code>let</code> | No | <code>"bottom" &#124; "top"</code> | <code>"bottom"</code> | Specify the direction of the combobox dropdown menu |
| size | <code>let</code> | No | <code>"sm" &#124; "xl"</code> | -- | Set the size of the combobox | | size | <code>let</code> | No | <code>"sm" &#124; "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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 | | 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 ### Slots

4
docs/src/COMPONENT_API.json
View file

@ -1615,8 +1615,8 @@
"name": "clear", "name": "clear",
"kind": "function", "kind": "function",
"description": "Clear the combo box programmatically", "description": "Clear the combo box programmatically",
"type": "() => void", "type": "(options?: { focus?: boolean; }) => void",
"value": "() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; ref?.focus(); }", "value": "() => { prevSelectedIndex = undefined; selectedIndex = -1; highlightedIndex = -1; highlightedId = undefined; selectedId = undefined; selectedItem = undefined; open = false; inputValue = \"\"; if (options?.focus !== false) ref?.focus(); }",
"isFunction": true, "isFunction": true,
"isFunctionDeclaration": true, "isFunctionDeclaration": true,
"constant": false, "constant": false,

17
docs/src/pages/components/ComboBox.svx
View file

@ -1,9 +1,6 @@
<script> <script>
import { ComboBox } from "carbon-components-svelte"; import { ComboBox } from "carbon-components-svelte";
import { Button } from "carbon-components-svelte";
import Preview from "../../components/Preview.svelte"; import Preview from "../../components/Preview.svelte";
let comboboxComponent
let selectedIndex = 1
</script> </script>
### Default ### Default
@ -31,15 +28,11 @@ items={[
### Clear selection ### Clear selection
<ComboBox titleText="Contact" placeholder="Select contact method" 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.
bind:this={comboboxComponent}
items={[ Specify `focus: false` in the method options to avoid re-focusing the input.
{id: "0", text: "Slack"},
{id: "1", text: "Email"}, <FileSource src="/framed/ComboBox/ComboBoxClear" />
{id: "2", text: "Fax"}
]} />
<br>
<Button on:click={comboboxComponent.clear}>Clear</Button>
### Multiple combo boxes ### Multiple combo boxes

20
docs/src/pages/framed/ComboBox/ComboBoxClear.svelte Normal file
View 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>

6
src/ComboBox/ComboBox.svelte
View file

@ -126,9 +126,9 @@
/** /**
* Clear the combo box programmatically * Clear the combo box programmatically
* @type {() => void} * @type {(options?: { focus?: boolean; }) => void}
*/ */
export function clear() { export function clear(options = {}) {
prevSelectedIndex = undefined; prevSelectedIndex = undefined;
selectedIndex = -1; selectedIndex = -1;
highlightedIndex = -1; highlightedIndex = -1;
@ -137,7 +137,7 @@
selectedItem = undefined; selectedItem = undefined;
open = false; open = false;
inputValue = ""; inputValue = "";
ref?.focus(); if (options?.focus !== false) ref?.focus();
} }
afterUpdate(() => { afterUpdate(() => {

1
tests/ComboBox.test.svelte
View file

@ -11,6 +11,7 @@
let ref: ComboBox; let ref: ComboBox;
let listRef: HTMLDivElement = null; let listRef: HTMLDivElement = null;
$: ref?.clear({ focus: false });
$: ref?.clear(); $: ref?.clear();
</script> </script>

2
types/ComboBox/ComboBox.svelte.d.ts vendored
View file

@ -158,5 +158,5 @@ export default class ComboBox extends SvelteComponentTyped<
/** /**
* Clear the combo box programmatically * Clear the combo box programmatically
*/ */
clear: () => void; clear: (options?: { focus?: boolean }) => void;
} }