Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(menu): enable numpad arrow and Enter keys #4492

Merged
merged 11 commits into from
Jun 3, 2024
24 changes: 12 additions & 12 deletions packages/menu/src/Menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -573,9 +573,9 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
}

protected navigateWithinMenu(event: KeyboardEvent): void {
const { code } = event;
const { key } = event;
const lastFocusedItem = this.childItems[this.focusedItemIndex];
const direction = code === 'ArrowDown' ? 1 : -1;
const direction = key === 'ArrowDown' ? 1 : -1;
const itemToFocus = this.focusMenuItemByOffset(direction);
if (itemToFocus === lastFocusedItem) {
return;
Expand All @@ -586,13 +586,13 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
}

protected navigateBetweenRelatedMenus(event: KeyboardEvent): void {
const { code } = event;
const { key } = event;
const shouldOpenSubmenu =
(this.isLTR && code === 'ArrowRight') ||
(!this.isLTR && code === 'ArrowLeft');
(this.isLTR && key === 'ArrowRight') ||
(!this.isLTR && key === 'ArrowLeft');
const shouldCloseSelfAsSubmenu =
(this.isLTR && code === 'ArrowLeft') ||
(!this.isLTR && code === 'ArrowRight');
(this.isLTR && key === 'ArrowLeft') ||
(!this.isLTR && key === 'ArrowRight');
if (shouldOpenSubmenu) {
event.stopPropagation();
const lastFocusedItem = this.childItems[this.focusedItemIndex];
Expand All @@ -616,7 +616,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
if (lastFocusedItem) {
lastFocusedItem.focused = true;
}
const { code } = event;
const { key } = event;
if (
event.shiftKey &&
event.target !== this &&
Expand All @@ -638,11 +638,11 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
document.addEventListener('keyup', replaceTabindex);
this.addEventListener('focusout', replaceTabindex);
}
if (code === 'Tab') {
if (key === 'Tab') {
this.prepareToCleanUp();
return;
}
if (code === 'Space') {
if (key === ' ') {
if (lastFocusedItem?.hasSubmenu) {
// Remove focus while opening overlay from keyboard or the visible focus
// will slip back to the first item in the menu.
Expand All @@ -651,7 +651,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
return;
}
}
if (code === 'Space' || code === 'Enter') {
if (key === ' ' || key === 'Enter') {
const childItem = this.childItems[this.focusedItemIndex];
if (
childItem &&
Expand All @@ -662,7 +662,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
}
return;
}
if (code === 'ArrowDown' || code === 'ArrowUp') {
if (key === 'ArrowDown' || key === 'ArrowUp') {
const childItem = this.childItems[this.focusedItemIndex];
if (
childItem &&
Expand Down
Loading
Loading