[!!!] Move tabbable iteration out of focus logic and into its own m…

…ethod

- it shouldn't be tied to the focus call anymore since the focus call no longer occurs after update, and makes more sense as a separate call

+ updates to logic:
  - do not run `tabbable` on `children` API since it won't even use the navigation - return early
  - use `this.backButton` instead for back button focusing, since `children` will no longer have `menuItems`
  - Check for a valid focusedItem - it's possible for consumers to either pass in bad indices or for `items` to update and the index to no longer exist

- Add E2E tests confirming changes & new logic work as expected

src/components/context_menu/context_menu_panel.spec.tsx

@@ -42,15 +42,6 @@ describe('EuiContextMenuPanel', () => {
       cy.focused().should('have.attr', 'class', 'euiContextMenuPanel');
     });
 
-    it('sets initial focus from `initialFocusedItemIndex`', () => {
-      cy.mount(
-        <EuiContextMenuPanel initialFocusedItemIndex={2}>
-          {children}
-        </EuiContextMenuPanel>
-      );
-      cy.focused().should('have.attr', 'data-test-subj', 'itemC');
-    });
-
     describe('with `children`', () => {
       it('ignores arrow key navigation, which only toggles for `items`', () => {
         cy.mount(<EuiContextMenuPanel>{children}</EuiContextMenuPanel>);
@@ -60,6 +51,20 @@ describe('EuiContextMenuPanel', () => {
     });
 
     describe('with `items`', () => {
+      it('sets initial focus from `initialFocusedItemIndex`', () => {
+        cy.mount(
+          <EuiContextMenuPanel items={items} initialFocusedItemIndex={2} />
+        );
+        cy.focused().should('have.attr', 'data-test-subj', 'itemC');
+      });
+
+      it('falls back to the panel if given an invalid `focusedItemIndex`', () => {
+        cy.mount(
+          <EuiContextMenuPanel items={items} initialFocusedItemIndex={99} />
+        );
+        cy.focused().should('have.attr', 'class', 'euiContextMenuPanel');
+      });
+
       it('focuses and registers any tabbable child as navigable menu items', () => {
         cy.mount(
           <EuiContextMenuPanel
@@ -75,6 +80,36 @@ describe('EuiContextMenuPanel', () => {
         cy.realPress('{downarrow}');
         cy.focused().should('have.attr', 'data-test-subj', 'itemA');
       });
+
+      it('correctly re-finds navigable menu items if `items` changes', () => {
+        const DynanicItemsTest = () => {
+          const [dynamicItems, setDynamicItems] = useState([
+            items[0],
+            items[1],
+          ]);
+          const appendItems = () => setDynamicItems(items);
+          return (
+            <>
+              <EuiContextMenuPanel items={dynamicItems} />
+              <button data-test-subj="appendItems" onClick={appendItems}>
+                Append more items
+              </button>
+            </>
+          );
+        };
+        cy.mount(<DynanicItemsTest />);
+        cy.realPress('{downarrow}');
+        cy.focused().should('have.attr', 'data-test-subj', 'itemA');
+        cy.realPress('{downarrow}');
+        cy.focused().should('have.attr', 'data-test-subj', 'itemB');
+        cy.realPress('{downarrow}');
+        cy.focused().should('have.attr', 'data-test-subj', 'itemA');
+
+        cy.get('[data-test-subj="appendItems"]').click();
+        cy.get('[data-test-subj="itemA"]').click();
+        cy.realPress('{uparrow}');
+        cy.focused().should('have.attr', 'data-test-subj', 'itemC');
+      });
     });
 
     describe('with `panels`', () => {

src/components/context_menu/context_menu_panel.tsx

@@ -115,6 +115,19 @@ export class EuiContextMenuPanel extends Component<Props, State> {
     };
   }
 
+  // Find all tabbable menu items on both panel init and
+  // whenever `menuItems` resets when `props.items` changes
+  findMenuItems = () => {
+    if (!this.panel) return;
+    if (!this.props.items?.length) return; // We only need menu items/arrow key navigation for the `items` API
+    if (this.state.menuItems.length) return; // If we already have menu items, no need to continue
+
+    const tabbableItems = tabbable(this.panel);
+    if (tabbableItems.length) {
+      this.setState({ menuItems: tabbableItems });
+    }
+  };
+
   incrementFocusedItemIndex = (amount: number) => {
     let nextFocusedItemIndex;
 
@@ -250,26 +263,24 @@ export class EuiContextMenuPanel extends Component<Props, State> {
         return;
       }
 
-      // If menuItems has been cleared, iterate through and set menuItems from tabbableItems
-      if (!this.state.menuItems.length && this.panel) {
-        const tabbableItems = tabbable(this.panel);
-        if (tabbableItems.length) {
-          this.setState({ menuItems: tabbableItems });
+      // If an item should be focused, focus it (if it exists)
+      if (this.state.focusedItemIndex != null && this.state.menuItems.length) {
+        const focusedItem = this.state.menuItems[this.state.focusedItemIndex];
+        if (focusedItem) {
+          focusedItem.focus();
+          return this.setState({ tookInitialFocus: true });
         }
       }
 
-      if (this.state.menuItems.length) {
-        // If an item is focused, focus it
-        if (this.state.focusedItemIndex != null) {
-          this.state.menuItems[this.state.focusedItemIndex].focus();
-          return this.setState({ tookInitialFocus: true });
-        }
-        // Otherwise, if the back button panel title is present, focus it
-        if (this.props.onClose) {
+      // Otherwise, if the back button panel title is present, focus it
+      if (this.backButton) {
+        // Focus the back button for both `items` and `children` APIs
+        this.backButton.focus();
+        // If `items`, ensure our focused item index is correct
+        if (this.state.menuItems.length) {
           this.setState({ focusedItemIndex: 0 });
-          this.state.menuItems[0].focus();
-          return this.setState({ tookInitialFocus: true });
         }
+        return this.setState({ tookInitialFocus: true });
       }
 
       // Focus on the panel as a last resort.
@@ -291,7 +302,10 @@ export class EuiContextMenuPanel extends Component<Props, State> {
     }
   };
 
-  componentDidUpdate() {
+  componentDidUpdate(_: Props, prevState: State) {
+    if (prevState.menuItems !== this.state.menuItems) {
+      this.findMenuItems();
+    }
     // Focus isn't always ready to be taken on mount, so we need to call it
     // on update as well just in case
     this.takeInitialFocus();
@@ -387,6 +401,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
 
     this.updateHeight();
     this.getInitialPopoverParent();
+    this.findMenuItems();
   };
 
   render() {