mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-20 20:33: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

37
src/ComboBox/ComboBox.svelte
View file

@ -205,7 +205,9 @@
$: menuId = `menu-${id}`; $: menuId = `menu-${id}`;
$: 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)); $: /** @type Array<ComboBoxItem> */ filteredItems = items.filter((item) =>
shouldFilterItem(item, value)
);
</script> </script>
<svelte:window <svelte:window
@ -287,7 +289,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 +300,33 @@
selectedId = filteredItems[highlightedIndex].id; selectedId = filteredItems[highlightedIndex].id;
} }
} else { } else {
open = false; // searching typed value in text list with lowercase
if (filteredItems[0]) { /** @type Array<ComboBoxItem> */
value = itemToString(filteredItems[0]); const listOfItems = filteredItems.map((e) => {
selectedItem = filteredItems[0]; return {
selectedId = filteredItems[0].id; 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]) {
value = itemToString(filteredItems[0]);
selectedItem = filteredItems[0];
selectedId = filteredItems[0].id;
}
} }
} }
highlightedIndex = -1; highlightedIndex = -1;