mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-15 10:21:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(dropdown): only dispatch "select" on interaction, allow arrow keys to navigate menu (#1569)

Browse source 
Fixes #1475
This commit is contained in:
Enrico Sacchetti 2022-12-07 23:09:29 -05:00 • committed by GitHub
commit fa5515ded0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/Dropdown/Dropdown.svelte
View file

@ -112,6 +112,12 @@
let highlightedIndex = -1;
$: inline = type === "inline";
$: selectedItem = items.find((item) => item.id === selectedId);
$: if (!open) {
highlightedIndex = -1;
}
function change(dir) {
let index = highlightedIndex + dir;
@ -138,14 +144,9 @@
highlightedIndex = index;
}
$: if (selectedId !== undefined) {
const dispatchSelect = () => {
dispatch("select", { selectedId, selectedItem });
}
$: inline = type === "inline";
$: selectedItem = items.find((item) => item.id === selectedId);
$: if (!open) {
highlightedIndex = -1;
}
};
</script>
<svelte:window
@ -227,19 +228,40 @@
items[highlightedIndex].id !== selectedId
) {
selectedId = items[highlightedIndex].id;
dispatchSelect();
open = false;
}
} else if (key === 'Tab') {
open = false;
ref.blur();
} else if (key === 'ArrowDown') {
if (!open) open = true;
change(1);
} else if (key === 'ArrowUp') {
if (!open) open = true;
change(-1);
} else if (key === 'Escape') {
open = false;
}
}}"
on:keyup="{(e) => {
const { key } = e;
if ([' '].includes(key)) {
e.preventDefault();
} else {
return;
}
open = !open;
if (
highlightedIndex > -1 &&
items[highlightedIndex].id !== selectedId
) {
selectedId = items[highlightedIndex].id;
dispatchSelect();
open = false;
}
}}"
disabled="{disabled}"
translateWithId="{translateWithId}"
id="{id}"
@ -271,6 +293,7 @@
return;
}
selectedId = item.id;
dispatchSelect();
ref.focus();
}}"
on:mouseenter="{() => {