Fix v6 menu keyboard navigation for nested submenus

Include submenu triggers when collecting keyboard-navigable items so
arrow keys work with the supported .menu > .submenu > .menu-item markup.
When focus moves to another item at the same level, close open sibling
submenus that no longer relate to focus (aligned with click/hover behavior).

Author: aljojoby9

js/src/menu.js

@@ -784,16 +784,46 @@ class Menu extends BaseComponent {
   // Keyboard navigation
   // -------------------------------------------------------------------------
 
+  _getItemsInMenu(menu) {
+    // Items may be direct children of `.menu`, or submenu triggers nested as
+    // `.menu > .submenu > .menu-item` (see menu-submenu visual tests / docs).
+    return SelectorEngine.find(
+      `:scope > ${SELECTOR_VISIBLE_ITEMS}, :scope > ${SELECTOR_SUBMENU_TOGGLE}`,
+      menu
+    ).filter(element => isVisible(element))
+  }
+
   _selectMenuItem({ key, target }) {
     const currentMenu = target.closest(SELECTOR_MENU) || this._menu
-    const items = SelectorEngine.find(`:scope > ${SELECTOR_VISIBLE_ITEMS}`, currentMenu)
-      .filter(element => isVisible(element))
+    const items = this._getItemsInMenu(currentMenu)
 
     if (!items.length) {
       return
     }
 
-    getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
+    const nextItem = getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target))
+    nextItem.focus()
+
+    // Arrowing between items at this level must close open sibling submenus that
+    // no longer relate to focus (mouse/click already do this via _closeSiblingSubmenus).
+    this._closeUnrelatedSubmenus(currentMenu, nextItem)
+  }
+
+  _closeUnrelatedSubmenus(currentMenu, focusedElement) {
+    for (const [submenu] of this._openSubmenus) {
+      const submenuWrapper = submenu.closest(SELECTOR_SUBMENU)
+      // Only consider submenus that are direct children of the menu being navigated
+      if (!submenuWrapper || submenuWrapper.parentElement !== currentMenu) {
+        continue
+      }
+
+      // Keep open when focus is on that submenu's trigger or still inside it
+      if (submenuWrapper.contains(focusedElement)) {
+        continue
+      }
+
+      this._closeSubmenu(submenu, submenuWrapper)
+    }
   }
 
   _handleSubmenuKeydown(event) {
@@ -867,12 +897,12 @@ class Menu extends BaseComponent {
       event.stopPropagation()
 
       const currentMenu = target.closest(SELECTOR_MENU)
-      const items = SelectorEngine.find(`:scope > ${SELECTOR_VISIBLE_ITEMS}`, currentMenu)
-        .filter(element => isVisible(element))
+      const items = this._getItemsInMenu(currentMenu)
 
       if (items.length) {
         const targetItem = key === HOME_KEY ? items[0] : items.at(-1)
         targetItem.focus()
+        this._closeUnrelatedSubmenus(currentMenu, targetItem)
       }
 
       return true

js/tests/unit/menu.spec.js

@@ -2765,6 +2765,103 @@ describe('Menu', () => {
       })
     })
 
+    it('should close open sibling submenu when keyboard focus moves to another item', () => {
+      return new Promise(resolve => {
+        // Match the supported markup from visual/menu-submenu.html
+        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">',
+          '        <a class="menu-item" href="#">Action 1</a>',
+          '      </div>',
+          '    </div>',
+          '    <div class="submenu" id="submenu2">',
+          '      <button class="menu-item" type="button">Submenu 2</button>',
+          '      <div class="menu">',
+          '        <a class="menu-item" href="#">Action 2</a>',
+          '      </div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const btnMenu = fixtureEl.querySelector('[data-bs-toggle="menu"]')
+        const submenu1Wrapper = fixtureEl.querySelector('#submenu1')
+        const submenu2Wrapper = fixtureEl.querySelector('#submenu2')
+        const submenu1Trigger = submenu1Wrapper.querySelector(':scope > .menu-item')
+        const submenu2Trigger = submenu2Wrapper.querySelector(':scope > .menu-item')
+        const submenu1 = submenu1Wrapper.querySelector('.menu')
+        const submenu2 = submenu2Wrapper.querySelector('.menu')
+
+        btnMenu.addEventListener('shown.bs.menu', () => {
+          // Open first submenu via click (same as mouse path)
+          submenu1Trigger.click()
+          expect(submenu1.classList.contains('show')).toBeTrue()
+
+          // Move keyboard focus to the other sibling submenu trigger
+          submenu1Trigger.focus()
+          const keydown = createEvent('keydown', { bubbles: true })
+          keydown.key = 'ArrowDown'
+          submenu1Trigger.dispatchEvent(keydown)
+
+          expect(document.activeElement).toEqual(submenu2Trigger)
+          expect(submenu1.classList.contains('show')).toBeFalse()
+          expect(submenu2.classList.contains('show')).toBeFalse()
+          resolve()
+        })
+
+        // eslint-disable-next-line no-new
+        new Menu(btnMenu)
+        btnMenu.click()
+      })
+    })
+
+    it('should keyboard-navigate between submenu triggers at the top level', () => {
+      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"><a class="menu-item" href="#">Action 1</a></div>',
+          '    </div>',
+          '    <a id="plainItem" class="menu-item" href="#">Plain item</a>',
+          '    <div class="submenu" id="submenu2">',
+          '      <button class="menu-item" type="button">Submenu 2</button>',
+          '      <div class="menu"><a class="menu-item" href="#">Action 2</a></div>',
+          '    </div>',
+          '  </div>',
+          '</div>'
+        ].join('')
+
+        const btnMenu = fixtureEl.querySelector('[data-bs-toggle="menu"]')
+        const submenu1Trigger = fixtureEl.querySelector('#submenu1 > .menu-item')
+        const plainItem = fixtureEl.querySelector('#plainItem')
+        const submenu2Trigger = fixtureEl.querySelector('#submenu2 > .menu-item')
+
+        btnMenu.addEventListener('shown.bs.menu', () => {
+          submenu1Trigger.focus()
+
+          const keydown = createEvent('keydown', { bubbles: true })
+          keydown.key = 'ArrowDown'
+          submenu1Trigger.dispatchEvent(keydown)
+          expect(document.activeElement).toEqual(plainItem)
+
+          plainItem.dispatchEvent(keydown)
+          expect(document.activeElement).toEqual(submenu2Trigger)
+          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 = [