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

fix(combo-box): apply filter when open

Browse source
This commit is contained in:
Eric Liu 2019-12-31 07:58:21 -08:00
commit f19589ac54
1 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/ComboBox/ComboBox.svelte
View file

@ -30,6 +30,7 @@
ListBoxSelection ListBoxSelection
} from '../ListBox'; } from '../ListBox';
let selectedId = undefined;
let inputRef = undefined; let inputRef = undefined;
let inputValue = undefined; let inputValue = undefined;
let highlightedIndex = -1; let highlightedIndex = -1;
@ -49,6 +50,7 @@
afterUpdate(() => { afterUpdate(() => {
if (open) { if (open) {
inputRef.focus(); inputRef.focus();
filteredItems = items.filter(item => shouldFilterItem(item, value));
} else { } else {
highlightedIndex = -1; highlightedIndex = -1;
inputValue = selectedItem ? selectedItem.text : ''; inputValue = selectedItem ? selectedItem.text : '';
@ -165,10 +167,11 @@
<ListBoxMenu aria-label={ariaLabel} {id}> <ListBoxMenu aria-label={ariaLabel} {id}>
{#each filteredItems as item, i (item.id || i)} {#each filteredItems as item, i (item.id || i)}
<ListBoxMenuItem <ListBoxMenuItem
active={selectedIndex === i} active={selectedIndex === i || selectedId === item.id}
highlighted={highlightedIndex === i || selectedIndex === i} highlighted={highlightedIndex === i || selectedIndex === i}
on:click={() => { on:click={() => {
selectedIndex = i; selectedId = item.id;
selectedIndex = items.map(({ id }) => id).indexOf(filteredItems[i].id);
open = false; open = false;
}} }}
on:mouseenter={() => { on:mouseenter={() => {