mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
fix(overflow-menu): keyboard navigation should skip disabled items (#1096)
This commit is contained in:
parent
16790daaa9
commit
c7de897b89
2 changed files with 17 additions and 4 deletions
|
@ -80,20 +80,19 @@
|
||||||
|
|
||||||
setContext("OverflowMenu", {
|
setContext("OverflowMenu", {
|
||||||
focusedId,
|
focusedId,
|
||||||
add: ({ id, text, primaryFocus }) => {
|
add: ({ id, text, primaryFocus, disabled }) => {
|
||||||
items.update((_) => {
|
items.update((_) => {
|
||||||
if (primaryFocus) {
|
if (primaryFocus) {
|
||||||
currentIndex.set(_.length);
|
currentIndex.set(_.length);
|
||||||
}
|
}
|
||||||
|
|
||||||
return [..._, { id, text, primaryFocus, index: _.length }];
|
return [..._, { id, text, primaryFocus, disabled, index: _.length }];
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
update: (id) => {
|
update: (id) => {
|
||||||
currentId.set(id);
|
currentId.set(id);
|
||||||
},
|
},
|
||||||
change: (direction) => {
|
change: (direction) => {
|
||||||
// TODO: skip disabled
|
|
||||||
let index = $currentIndex + direction;
|
let index = $currentIndex + direction;
|
||||||
|
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
|
@ -102,6 +101,20 @@
|
||||||
index = 0;
|
index = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let disabled = $items[index].disabled;
|
||||||
|
|
||||||
|
while (disabled) {
|
||||||
|
index = index + direction;
|
||||||
|
|
||||||
|
if (index < 0) {
|
||||||
|
index = $items.length - 1;
|
||||||
|
} else if (index >= $items.length) {
|
||||||
|
index = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
disabled = $items[index].disabled;
|
||||||
|
}
|
||||||
|
|
||||||
currentIndex.set(index);
|
currentIndex.set(index);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
|
|
||||||
const { focusedId, add, update, change } = getContext("OverflowMenu");
|
const { focusedId, add, update, change } = getContext("OverflowMenu");
|
||||||
|
|
||||||
add({ id, text, primaryFocus });
|
add({ id, text, primaryFocus, disabled });
|
||||||
|
|
||||||
afterUpdate(() => {
|
afterUpdate(() => {
|
||||||
if (ref && primaryFocus) {
|
if (ref && primaryFocus) {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue