Fix arrow-key navigation inside nested submenu panels

Keydown handlers on nested .menu panels could not resolve the owning
Menu toggle (they only looked for sibling toggles), so arrow keys did
nothing inside open submenus. Resolve the instance from open menus that
contain the event target, and add a regression test.

Author: aljojoby9

js/src/menu.js

@@ -950,6 +950,29 @@ class Menu extends BaseComponent {
     }
   }
 
+  static _getToggleFromKeydownContext(element, event) {
+    if (element.matches?.(SELECTOR_DATA_TOGGLE)) {
+      return element
+    }
+
+    // Root panel is usually a sibling of the toggle (when not moved to a container).
+    const siblingToggle = SelectorEngine.prev(element, SELECTOR_DATA_TOGGLE)[0] ||
+      SelectorEngine.next(element, SELECTOR_DATA_TOGGLE)[0]
+    if (siblingToggle) {
+      return siblingToggle
+    }
+
+    // Nested submenu panels (and menus moved to `container`) are not siblings of
+    // the toggle. Resolve the owning open Menu instance from the event target.
+    for (const instance of Menu._openInstances) {
+      if (instance._menu?.contains(event.target) || instance._element === event.target) {
+        return instance._element
+      }
+    }
+
+    return SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode)
+  }
+
   static dataApiKeydownHandler(event) {
     // Treat contenteditable hosts (e.g. rich-text editors) like inputs so the
     // menu doesn't hijack their arrow keys.
@@ -971,11 +994,7 @@ class Menu extends BaseComponent {
       return
     }
 
-    const getToggleButton = this.matches(SELECTOR_DATA_TOGGLE) ?
-      this :
-      (SelectorEngine.prev(this, SELECTOR_DATA_TOGGLE)[0] ||
-        SelectorEngine.next(this, SELECTOR_DATA_TOGGLE)[0] ||
-        SelectorEngine.findOne(SELECTOR_DATA_TOGGLE, event.delegateTarget.parentNode))
+    const getToggleButton = Menu._getToggleFromKeydownContext(this, event)
 
     if (!getToggleButton) {
       return

js/tests/unit/menu.spec.js

@@ -2907,6 +2907,53 @@ describe('Menu', () => {
       })
     })
 
+    it('should arrow-navigate items inside an open nested submenu', () => {
+      return new Promise(resolve => {
+        fixtureEl.innerHTML = [
+          '<div>',
+          '  <button class="btn" data-bs-toggle="menu">Menu</button>',
+          '  <div class="menu">',
+          '    <div class="submenu" id="submenu1">',
+          '      <button class="menu-item" type="button">Submenu 1</button>',
+          '      <div class="menu" id="nestedMenu">',
+          '        <a id="nested1" class="menu-item" href="#">Action 1</a>',
+          '        <a id="nested2" class="menu-item" href="#">Action 2</a>',
+          '      </div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const btnMenu = fixtureEl.querySelector('[data-bs-toggle="menu"]')
+        const submenuTrigger = fixtureEl.querySelector('#submenu1 > .menu-item')
+        const nested1 = fixtureEl.querySelector('#nested1')
+        const nested2 = fixtureEl.querySelector('#nested2')
+        const nestedMenu = fixtureEl.querySelector('#nestedMenu')
+
+        btnMenu.addEventListener('shown.bs.menu', () => {
+          submenuTrigger.click()
+          expect(nestedMenu.classList.contains('show')).toBeTrue()
+
+          nested1.focus()
+          const keydown = createEvent('keydown', { bubbles: true })
+          keydown.key = 'ArrowDown'
+          nested1.dispatchEvent(keydown)
+
+          expect(document.activeElement).toEqual(nested2)
+
+          const keyup = createEvent('keydown', { bubbles: true })
+          keyup.key = 'ArrowUp'
+          nested2.dispatchEvent(keyup)
+          expect(document.activeElement).toEqual(nested1)
+          resolve()
+        })
+
+        // eslint-disable-next-line no-new
+        new Menu(btnMenu)
+        btnMenu.click()
+      })
+    })
+
     it('should open submenu with ArrowRight key', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [