mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 02:11:05 +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

4
COMPONENT_INDEX.md
View file

@ -657,7 +657,7 @@ 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 |
@ -680,7 +680,7 @@ export interface ComboBoxItem {
| 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;
} }