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): fix an issue, when selection via typing does not work as expected, resolves #1222

Browse source
This commit is contained in:
István Pató 2022-08-03 13:18:47 +02:00
commit a132f2e281
No known key found for this signature in database
GPG key ID: 3A842123BFF8E969
1 changed files with 30 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/ComboBox/ComboBox.svelte
View file

@ -205,7 +205,9 @@
$: menuId = `menu-${id}`;
$: comboId = `combo-${id}`;
$: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;
$: filteredItems = items.filter((item) => shouldFilterItem(item, value));
$: /** @type Array<ComboBoxItem> */ filteredItems = items.filter((item) =>
shouldFilterItem(item, value)
);
</script>
<svelte:window
@ -287,7 +289,6 @@
on:keydown|stopPropagation="{({ key }) => {
if (key === 'Enter') {
open = !open;
if (
highlightedIndex > -1 &&
filteredItems[highlightedIndex]?.id !== selectedId
@ -298,6 +299,27 @@
selectedItem = filteredItems[highlightedIndex];
selectedId = filteredItems[highlightedIndex].id;
}
} else {
// searching typed value in text list with lowercase
/** @type Array<ComboBoxItem> */
const listOfItems = filteredItems.map((e) => {
return {
id: e.id,
text: e.text?.toLowerCase(),
disabled: e.disabled,
};
});
const matchedItem = listOfItems.find(
(e) => e.text === value?.toLowerCase()
);
if (matchedItem) {
// typed value has matched
open = false;
selectedItem = filteredItems.find(
(e) => e.id === matchedItem.id
);
value = selectedItem.text;
selectedId = selectedItem.id;
} else {
open = false;
if (filteredItems[0]) {
@ -306,6 +328,7 @@
selectedId = filteredItems[0].id;
}
}
}
highlightedIndex = -1;
} else if (key === 'Tab') {
open = false;