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

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

@ -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