[!!!] Restore up/down key navigation behavior

cee-chen · cee-chen · commit 4b397b02eab0 · 2022-05-05T16:21:09.000-07:00
- rename `incrementFocusedItemIndex` to `focusMenuItem` and change args to be a bit more human readable

- instead of having the previous `updateFocus` handle up/down nav, we can simply call `.focus()` from within this method, and arrow navigation works as before

- note `?.focus();` - this is important to keep as users can start mashing up/down before `tabbable` is done running and there are any menu items to focus

- no specific E2E tests for this, tests should simply not be failing
diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx
@@ -128,15 +128,17 @@ export class EuiContextMenuPanel extends Component<Props, State> {
     }
   };
 
-  incrementFocusedItemIndex = (amount: number) => {
+  focusMenuItem = (direction: 'up' | 'down') => {
+    const indexOffset = direction === 'up' ? -1 : 1;
     let nextFocusedItemIndex;
 
     if (this.state.focusedItemIndex === undefined) {
       // If this is the beginning of the user's keyboard navigation of the menu, then we'll focus
       // either the first or last item.
-      nextFocusedItemIndex = amount < 0 ? this.state.menuItems.length - 1 : 0;
+      nextFocusedItemIndex =
+        direction === 'up' ? this.state.menuItems.length - 1 : 0;
     } else {
-      nextFocusedItemIndex = this.state.focusedItemIndex + amount;
+      nextFocusedItemIndex = this.state.focusedItemIndex + indexOffset;
 
       if (nextFocusedItemIndex < 0) {
         nextFocusedItemIndex = this.state.menuItems.length - 1;
@@ -145,9 +147,8 @@ export class EuiContextMenuPanel extends Component<Props, State> {
       }
     }
 
-    this.setState({
-      focusedItemIndex: nextFocusedItemIndex,
-    });
+    this.setState({ focusedItemIndex: nextFocusedItemIndex });
+    this.state.menuItems[nextFocusedItemIndex]?.focus();
   };
 
   onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
@@ -198,7 +199,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
 
         case cascadingMenuKeys.ARROW_UP:
           event.preventDefault();
-          this.incrementFocusedItemIndex(-1);
+          this.focusMenuItem('up');
 
           if (this.props.onUseKeyboardToNavigate) {
             this.props.onUseKeyboardToNavigate();
@@ -207,7 +208,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
 
         case cascadingMenuKeys.ARROW_DOWN:
           event.preventDefault();
-          this.incrementFocusedItemIndex(1);
+          this.focusMenuItem('down');
 
           if (this.props.onUseKeyboardToNavigate) {
             this.props.onUseKeyboardToNavigate();
