Fix nested dropdown keyboard leaving sibling submenus open#42694
Fix nested dropdown keyboard leaving sibling submenus open#42694aljojoby9 wants to merge 1 commit into
Conversation
When arrow keys target a nested dropdown toggle, close other open menus first so only the focused submenu stays shown. Fixes overlapping menus with autoClose "outside" during keyboard navigation. Fixes twbs#41869
There was a problem hiding this comment.
Pull request overview
Fixes an issue in Bootstrap’s dropdown keyboard navigation where moving between nested submenu toggles (notably with data-bs-auto-close="outside") could leave multiple sibling submenus open at the same time, causing overlapping menus.
Changes:
- Update ArrowUp/ArrowDown keydown handling so that when the keydown originates from a dropdown toggle, other open menus are closed via
Dropdown.clearMenus(event)before showing the newly focused submenu. - Add a unit test that reproduces the nested-submenu keyboard scenario and asserts sibling submenus are closed when opening another submenu via ArrowDown.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| js/src/dropdown.js | Closes other open dropdown menus before showing a submenu when ArrowUp/ArrowDown is pressed on a dropdown toggle. |
| js/tests/unit/dropdown.spec.js | Adds regression coverage ensuring sibling nested submenus don’t remain open during keyboard navigation. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
v5 doesn't support nested menus—I don't think we need any changes in support of them? |
|
They're coming in v6 :). You're welcome to checkout the v6-dev branch and see if there's any improvements to make there! |
|
Thanks @mdo — I'll take a look at the |
Description
When using nested dropdowns with
data-bs-auto-close="outside", keyboard arrow navigation between submenu toggles can leave multiple submenus open at once. ArrowUp/ArrowDown on a nested toggle always calledshow()without closing sibling menus first.This change closes other open menus (via
clearMenus) when the keydown target is a dropdown toggle, then shows the focused submenu. Regular in-menu item arrow navigation is unchanged.Motivation & Context
Fixes #41869.
Overlapping nested submenus during keyboard navigation is a real usability/accessibility problem in multi-level menus (navbars, app menus). A previous PR (#42528) proposed the same approach and was closed by the author without maintainer rejection.
Type of changes
Checklist
npm run js-lint)Tests
npx karma start js/tests/karma.conf.js --single-run→ 810/810 SUCCESSnpx eslint js/src/dropdown.js js/tests/unit/dropdown.spec.js→ no errors