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

fix(multi-select): use native binding for value prop

Browse source
This commit is contained in:
Eric Liu 2022-06-12 06:58:40 -07:00
commit a898e415dc
1 changed files with 5 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/MultiSelect/MultiSelect.svelte
View file

@ -183,7 +183,6 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let inputValue = "";
let initialSorted = false; let initialSorted = false;
let highlightedIndex = -1; let highlightedIndex = -1;
let prevChecked = []; let prevChecked = [];
@ -255,7 +254,7 @@
} }
highlightedIndex = -1; highlightedIndex = -1;
inputValue = ""; value = "";
} }
items = sortedItems; items = sortedItems;
@ -275,7 +274,6 @@
highlightedIndex > -1 highlightedIndex > -1
? (filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null ? (filterable ? filteredItems : sortedItems)[highlightedIndex]?.id ?? null
: null; : null;
$: value = inputValue;
</script> </script>
<svelte:window <svelte:window
@ -403,6 +401,7 @@
{#if filterable} {#if filterable}
<input <input
bind:this="{inputRef}" bind:this="{inputRef}"
bind:value
{...$$restProps} {...$$restProps}
role="combobox" role="combobox"
tabindex="0" tabindex="0"
@ -413,11 +412,8 @@
aria-disabled="{disabled}" aria-disabled="{disabled}"
aria-controls="{menuId}" aria-controls="{menuId}"
class:bx--text-input="{true}" class:bx--text-input="{true}"
class:bx--text-input--empty="{inputValue === ''}" class:bx--text-input--empty="{value === ''}"
class:bx--text-input--light="{light}" class:bx--text-input--light="{light}"
on:input="{({ target }) => {
inputValue = target.value;
}}"
on:keydown on:keydown
on:keydown|stopPropagation="{({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
@ -451,15 +447,14 @@
placeholder="{placeholder}" placeholder="{placeholder}"
id="{id}" id="{id}"
name="{name}" name="{name}"
value="{inputValue}"
/> />
{#if invalid} {#if invalid}
<WarningFilled class="bx--list-box__invalid-icon" /> <WarningFilled class="bx--list-box__invalid-icon" />
{/if} {/if}
{#if inputValue} {#if value}
<ListBoxSelection <ListBoxSelection
on:clear="{() => { on:clear="{() => {
inputValue = ''; value = '';
open = false; open = false;
}}" }}"
translateWithId="{translateWithIdSelection}" translateWithId="{translateWithIdSelection}"