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(combobox): filtered ComboBox handling with keyboard (#926)

Browse source 
* fix(combobox): filtered ComboBox handling with keyboard

* fix: dispatching filteredItems

* fix: default value settings (init) on inputValue

* fix: multiple event dispatch, and item selection bug

* fix(ComboBox): programmatically setting selectedIndex has no effect

* fix(ComboBox): selectedIndex prog. setting on filtered items

* fix(ComboBox): removed unnecessary blur code fragment, fix mouse selection after keyboard editing
This commit is contained in:
István Pató 2022-01-10 23:45:37 +01:00 • committed by GitHub
commit a2a5159a59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/ComboBox/ComboBox.svelte
View file

@ -108,18 +108,19 @@
const dispatch = createEventDispatcher();
let selectedId = undefined;
let inputValue = "";
let inputValue = value;
let highlightedIndex = -1;
let selectedItem;
function change(dir) {
let index = highlightedIndex + dir;
let _items = !filteredItems?.length ? items : filteredItems;
if (index < 0) {
index = items.length - 1;
} else if (index >= items.length) {
index = _items.length - 1;
} else if (index >= _items.length) {
index = 0;
}
highlightedIndex = index;
}
@ -130,38 +131,51 @@
export function clear() {
selectedIndex = -1;
highlightedIndex = -1;
highlightedId = undefined;
selectedItem = undefined;
open = false;
inputValue = "";
ref?.focus();
}
let prevInputValue;
afterUpdate(() => {
if (open) {
ref.focus();
filteredItems = items.filter((item) => shouldFilterItem(item, value));
} else {
highlightedIndex = -1;
filteredItems = [];
if (!selectedItem) {
selectedId = undefined;
selectedIndex = -1;
} else {
// programmatically set selectedIndex
inputValue = selectedItem.text;
}
}
});
$: if (selectedIndex > -1) {
selectedId = items[selectedIndex].id;
let prevSelectedIndex;
$: if (selectedIndex > -1 && prevSelectedIndex !== selectedIndex) {
prevSelectedIndex = selectedIndex;
if (filteredItems?.length === 1 && open) {
selectedId = filteredItems[0].id;
selectedItem = filteredItems[0];
highlightedIndex = -1;
highlightedId = undefined;
} else {
selectedId = items[selectedIndex].id;
selectedItem = items[selectedIndex];
}
dispatch("select", { selectedId, selectedIndex, selectedItem });
}
$: ariaLabel = $$props["aria-label"] || "Choose an item";
$: menuId = `menu-${id}`;
$: comboId = `combo-${id}`;
$: highlightedId = items[highlightedIndex]
? items[highlightedIndex].id
: undefined;
$: highlightedId = items[highlightedIndex] ? items[highlightedIndex].id : 0;
$: filteredItems = items.filter((item) => shouldFilterItem(item, value));
$: selectedItem = items[selectedIndex];
$: inputValue = selectedItem ? selectedItem.text : "";
$: value = inputValue;
</script>
@ -245,15 +259,24 @@
if (highlightedIndex > -1 && highlightedIndex !== selectedIndex) {
selectedIndex = highlightedIndex;
open = false;
highlightedIndex = -1;
if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text;
selectedItem = filteredItems[selectedIndex];
selectedId = filteredItems[selectedIndex].id;
}
}
if (highlightedIndex < 0 && selectedIndex > -1) {
selectedIndex = items.findIndex((item) => item.id === selectedId);
} else {
selectedIndex = 0;
open = false;
highlightedIndex = -1;
if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text;
selectedItem = filteredItems[selectedIndex];
selectedId = filteredItems[selectedIndex].id;
selectedIndex = items.findIndex(
(item) => item.id === selectedId
);
}
}
} else if (key === 'Tab') {
@ -270,12 +293,6 @@
on:focus
on:blur
on:blur="{({ relatedTarget }) => {
if (inputValue.length === 0 && selectedIndex > -1) {
if (filteredItems[selectedIndex]) {
inputValue = filteredItems[selectedIndex].text;
}
}
if (!open || !relatedTarget) return;
if (
relatedTarget &&