mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 12:23:02 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(ComboBox): programmatically setting selectedIndex has no effect

Browse source
This commit is contained in:
István Pató 2022-01-05 14:41:13 +01:00
commit 8264366473
No known key found for this signature in database
GPG key ID: 3A842123BFF8E969
1 changed files with 29 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/ComboBox/ComboBox.svelte
View file

@ -121,7 +121,6 @@
} else if (index >= _items.length) { } else if (index >= _items.length) {
index = 0; index = 0;
} }
highlightedIndex = index; highlightedIndex = index;
} }
@ -132,6 +131,7 @@
export function clear() { export function clear() {
selectedIndex = -1; selectedIndex = -1;
highlightedIndex = -1; highlightedIndex = -1;
highlightedId = undefined;
selectedItem = undefined; selectedItem = undefined;
open = false; open = false;
inputValue = ""; inputValue = "";
@ -144,10 +144,13 @@
filteredItems = items.filter((item) => shouldFilterItem(item, value)); filteredItems = items.filter((item) => shouldFilterItem(item, value));
} else { } else {
highlightedIndex = -1; highlightedIndex = -1;
filteredItems = [];
if (!selectedItem) { if (!selectedItem) {
selectedId = undefined; selectedId = undefined;
selectedIndex = -1; selectedIndex = -1;
} else {
// programmatically set selectedIndex
inputValue = selectedItem.text;
} }
} }
}); });
@ -155,21 +158,27 @@
let prevSelectedIndex; let prevSelectedIndex;
$: if (selectedIndex > -1 && prevSelectedIndex !== selectedIndex) { $: if (selectedIndex > -1 && prevSelectedIndex !== selectedIndex) {
prevSelectedIndex = selectedIndex; prevSelectedIndex = selectedIndex;
if (filteredItems?.length === 1) { if (filteredItems?.length === 1 && open) {
selectedId = filteredItems[0].id; selectedId = filteredItems[0].id;
selectedItem = filteredItems[0]; selectedItem = filteredItems[0];
highlightedIndex = -1;
highlightedId = undefined;
} else { } else {
selectedId = items[selectedIndex].id; if (filteredItems?.length === 1) {
selectedItem = items[selectedIndex]; selectedId = filteredItems[0].id;
selectedItem = filteredItems[0];
} else {
selectedId = items[selectedIndex].id;
selectedItem = items[selectedIndex];
}
} }
dispatch("select", { selectedId, selectedIndex, selectedItem }); dispatch("select", { selectedId, selectedIndex, selectedItem });
} }
$: ariaLabel = $$props["aria-label"] || "Choose an item"; $: ariaLabel = $$props["aria-label"] || "Choose an item";
$: menuId = `menu-${id}`; $: menuId = `menu-${id}`;
$: comboId = `combo-${id}`; $: comboId = `combo-${id}`;
$: highlightedId = items[highlightedIndex] $: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;
? items[highlightedIndex].id
: undefined;
$: filteredItems = items.filter((item) => shouldFilterItem(item, value)); $: filteredItems = items.filter((item) => shouldFilterItem(item, value));
$: value = inputValue; $: value = inputValue;
</script> </script>
@ -254,15 +263,21 @@
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) { if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex; selectedIndex = highlightedIndex;
open = false; open = false;
highlightedIndex = -1;
if (filteredItems[selectedIndex]) { if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text; inputValue = filteredItems[selectedIndex].text;
selectedItem = filteredItems[selectedIndex];
selectedId = filteredItems[selectedIndex].id;
} else {
} }
} } else {
selectedIndex = 0;
if (highlightedIndex < 0 && selectedIndex > -1) { open = false;
highlightedIndex = -1;
if (filteredItems[selectedIndex]) { if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text; inputValue = filteredItems[selectedIndex].text;
selectedItem = filteredItems[selectedIndex];
selectedId = filteredItems[selectedIndex].id;
} }
} }
} else if (key === 'Tab') { } else if (key === 'Tab') {
@ -282,6 +297,8 @@
if (inputValue.length === 0 && selectedIndex > -1) { if (inputValue.length === 0 && selectedIndex > -1) {
if (filteredItems[selectedIndex]) { if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text; inputValue = filteredItems[selectedIndex].text;
selectedItem = filteredItems[selectedIndex];
selectedId = filteredItems[selectedIndex].id;
} }
} }