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

fix(combo-box): use native binding for value prop

Browse source 
Fixes #1262
This commit is contained in:
Eric Liu 2022-06-12 06:58:30 -07:00
commit df46b2a8b3
1 changed files with 12 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/ComboBox/ComboBox.svelte
View file

@ -121,7 +121,6 @@
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
let selectedItem = undefined; let selectedItem = undefined;
let inputValue = value;
let prevSelectedId = null; let prevSelectedId = null;
let highlightedIndex = -1; let highlightedIndex = -1;
@ -161,7 +160,7 @@
selectedId = undefined; selectedId = undefined;
selectedItem = undefined; selectedItem = undefined;
open = false; open = false;
inputValue = ""; value = "";
if (options?.focus !== false) ref?.focus(); if (options?.focus !== false) ref?.focus();
} }
@ -174,12 +173,12 @@
filteredItems = []; filteredItems = [];
if (!selectedItem) { if (!selectedItem) {
selectedId = undefined; selectedId = undefined;
inputValue = ""; value = "";
highlightedIndex = -1; highlightedIndex = -1;
highlightedId = undefined; highlightedId = undefined;
} else { } else {
// programmatically set inputValue // programmatically set value
inputValue = selectedItem.text; value = selectedItem.text;
} }
} }
}); });
@ -207,7 +206,6 @@
$: comboId = `combo-${id}`; $: comboId = `combo-${id}`;
$: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0; $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;
$: filteredItems = items.filter((item) => shouldFilterItem(item, value)); $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
$: value = inputValue;
</script> </script>
<svelte:window <svelte:window
@ -257,6 +255,7 @@
> >
<input <input
bind:this="{ref}" bind:this="{ref}"
bind:value
tabindex="0" tabindex="0"
autocomplete="off" autocomplete="off"
aria-autocomplete="list" aria-autocomplete="list"
@ -269,19 +268,17 @@
disabled="{disabled}" disabled="{disabled}"
placeholder="{placeholder}" placeholder="{placeholder}"
id="{id}" id="{id}"
value="{inputValue}"
name="{name}" name="{name}"
{...$$restProps} {...$$restProps}
class:bx--text-input="{true}" class:bx--text-input="{true}"
class:bx--text-input--light="{light}" class:bx--text-input--light="{light}"
class:bx--text-input--empty="{inputValue === ''}" class:bx--text-input--empty="{value === ''}"
on:input="{async ({ target }) => { on:input="{({ target }) => {
if (!open && target.value.length > 0) { if (!open && target.value.length > 0) {
open = true; open = true;
} }
inputValue = target.value; if (!value.length) {
if (!inputValue.length) {
clear(); clear();
open = true; open = true;
} }
@ -297,14 +294,14 @@
) { ) {
open = false; open = false;
if (filteredItems[highlightedIndex]) { if (filteredItems[highlightedIndex]) {
inputValue = filteredItems[highlightedIndex].text; value = filteredItems[highlightedIndex].text;
selectedItem = filteredItems[highlightedIndex]; selectedItem = filteredItems[highlightedIndex];
selectedId = filteredItems[highlightedIndex].id; selectedId = filteredItems[highlightedIndex].id;
} }
} else { } else {
open = false; open = false;
if (filteredItems[0]) { if (filteredItems[0]) {
inputValue = filteredItems[0].text; value = filteredItems[0].text;
selectedItem = filteredItems[0]; selectedItem = filteredItems[0];
selectedId = filteredItems[0].id; selectedId = filteredItems[0].id;
} }
@ -344,7 +341,7 @@
class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning" class="bx--list-box__invalid-icon bx--list-box__invalid-icon--warning"
/> />
{/if} {/if}
{#if inputValue} {#if value}
<ListBoxSelection <ListBoxSelection
on:clear on:clear
on:clear="{clear}" on:clear="{clear}"
@ -385,7 +382,7 @@
open = false; open = false;
if (filteredItems[i]) { if (filteredItems[i]) {
inputValue = filteredItems[i].text; value = filteredItems[i].text;
} }
}}" }}"
on:mouseenter="{() => { on:mouseenter="{() => {