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): correctly select item in a non-filterable ComboBox (#1419)

Browse source 
Fixes #1222

A non-filterable ComboBox will select the item that matches the typed value when pressing "Enter." An unknown (unmatched) value will select the first item.
This commit is contained in:
István Pató 2022-08-04 18:58:32 +02:00 • committed by GitHub
commit de81ef99af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/ComboBox/ComboBox.svelte
View file

@ -287,7 +287,6 @@
on:keydown|stopPropagation="{({ key }) => { on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') { if (key === 'Enter') {
open = !open; open = !open;
if ( if (
highlightedIndex > -1 && highlightedIndex > -1 &&
filteredItems[highlightedIndex]?.id !== selectedId filteredItems[highlightedIndex]?.id !== selectedId
@ -299,11 +298,18 @@
selectedId = filteredItems[highlightedIndex].id; selectedId = filteredItems[highlightedIndex].id;
} }
} else { } else {
open = false; // searching typed value in text list with lowercase
if (filteredItems[0]) { const matchedItem =
value = itemToString(filteredItems[0]); filteredItems.find(
selectedItem = filteredItems[0]; (e) =>
selectedId = filteredItems[0].id; e.text.toLowerCase() === value?.toLowerCase() && !e.disabled
) ?? filteredItems.find((e) => !e.disabled);
if (matchedItem) {
// typed value has matched or fallback to first enabled item
open = false;
selectedItem = matchedItem;
value = itemToString(selectedItem);
selectedId = selectedItem.id;
} }
} }
highlightedIndex = -1; highlightedIndex = -1;