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

feat(header-search): deefault selectedResultIndex should be 0

Browse source 
Reset selectedResultIndex, value after dispatching.
This commit is contained in:
Eric Liu 2020-11-26 15:10:59 -08:00
commit 69a82e5e5c
2 changed files with 13 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/UIShell/HeaderSearch.svelte
View file

@ -1,6 +1,8 @@
<script> <script>
/** /**
* @typedef {{ href: string; text: string; description?: string; }} HeaderSearchResult * @typedef {{ href: string; text: string; description?: string; }} HeaderSearchResult
* @event {any} active
* @event {any} inactive
* @event {any} clear * @event {any} clear
* @event {{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }} select * @event {{ value: string; selectedResultIndex: number; selectedResult: HeaderSearchResult }} select
*/ */
@ -21,7 +23,7 @@
export let results = []; export let results = [];
/** Specify the selected result index */ /** Specify the selected result index */
export let selectedResultIndex = -1; export let selectedResultIndex = 0;
import { createEventDispatcher } from "svelte"; import { createEventDispatcher } from "svelte";
import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte"; import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
@ -31,13 +33,19 @@
let refSearch = null; let refSearch = null;
function selectResult() { function reset() {
active = false; active = false;
value = ""; value = "";
selectedResultIndex = 0;
}
function selectResult() {
dispatch("select", { value, selectedResultIndex, selectedResult }); dispatch("select", { value, selectedResultIndex, selectedResult });
reset();
} }
$: if (active && ref) ref.focus(); $: if (active && ref) ref.focus();
$: dispatch(active ? "active" : "inactive");
$: selectedResult = results[selectedResultIndex]; $: selectedResult = results[selectedResultIndex];
$: selectedId = selectedResult $: selectedId = selectedResult
? `search-menuitem-${selectedResultIndex}` ? `search-menuitem-${selectedResultIndex}`
@ -243,8 +251,7 @@
class:bx--header__action="{true}" class:bx--header__action="{true}"
class:hidden="{!active}" class:hidden="{!active}"
on:click="{() => { on:click="{() => {
active = false; reset();
value = '';
dispatch('clear'); dispatch('clear');
}}" }}"
> >

2
tests/HeaderSearch.svelte
View file

@ -65,6 +65,8 @@
bind:value bind:value
bind:selectedResultIndex bind:selectedResultIndex
results="{results}" results="{results}"
on:active
on:inactive
on:clear="{() => { on:clear="{() => {
console.log('on:clear'); console.log('on:clear');
}}" }}"