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

changed ComboBox to not erase the user typed value

Browse source
This commit is contained in:
Natasha Frantseva 2023-04-17 10:53:22 -06:00
commit 73aac81c92
1 changed files with 23 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/ComboBox/ComboBox.svelte
View file

@ -174,7 +174,7 @@
filteredItems = []; filteredItems = [];
if (!selectedItem) { if (!selectedItem) {
selectedId = undefined; selectedId = undefined;
value = ""; // value = "";
highlightedIndex = -1; highlightedIndex = -1;
highlightedId = undefined; highlightedId = undefined;
} else { } else {
@ -207,6 +207,18 @@
$: 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));
$: if (items.filter((item) => item.text === value).length > 0) {
items.map((item) => {
if (item.text === value) {
selectedItem = item;
selectedId = item.id;
}
});
} else {
selectedItem = undefined;
selectedId = undefined;
}
</script> </script>
<svelte:window <svelte:window
@ -275,14 +287,14 @@
class:bx--text-input--light="{light}" class:bx--text-input--light="{light}"
class:bx--text-input--empty="{value === ''}" class:bx--text-input--empty="{value === ''}"
on:input="{({ target }) => { on:input="{({ target }) => {
if (!open && target.value.length > 0) { // if (!open && target.value.length > 0) {
open = true; // open = true;
} // }
value = target.value;
if (!value.length) { // if (!value.length) {
clear(); // clear();
open = true; // open = true;
} // }
}}" }}"
on:keydown on:keydown
on:keydown|stopPropagation="{(e) => { on:keydown|stopPropagation="{(e) => {
@ -352,7 +364,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 value} {#if false}
<ListBoxSelection <ListBoxSelection
on:clear on:clear
on:clear="{clear}" on:clear="{clear}"
@ -390,6 +402,7 @@
return; return;
} }
selectedId = item.id; selectedId = item.id;
value = item.text;
open = false; open = false;
if (filteredItems[i]) { if (filteredItems[i]) {