Fix: prevent multiple submenus from staying open during keyboard navigation in dropdown

[VishalManole7]

Description

This PR fixes an issue where nested dropdown submenus using
data-bs-auto-close="outside"
can remain open simultaneously when navigating with keyboard arrow keys.

When moving focus upward (ArrowUp), Bootstrap’s dataApiKeydownHandler triggers a call to show(), which reopens the submenu the user just left. This results in multiple overlapping open submenus.

This fix ensures that only the submenu associated with the currently focused item remains open.

Root Cause

In dropdown.js, the following block always calls instance.show() when navigating with ArrowUp/ArrowDown:

if (isUpOrDownEvent) {
event.stopPropagation();
instance.show();
instance._selectMenuItem(event);
return;
}

This causes previously opened submenus to be reopened during keyboard navigation.

Fix Implemented

Only call show() when navigating downward into a submenu.

Prevent calling show() when navigating upward, allowing Bootstrap’s normal auto-close behavior to work.

// FIX: Prevent reopening submenus while navigating with arrow keys
if (isUpOrDownEvent) {
event.stopPropagation();

// Only open submenu when moving DOWN into it
if (event.key === 'ArrowDown' && !instance._menu.classList.contains('show')) {
instance.show();
}

instance._selectMenuItem(event);
return;
}

This ensures that only one submenu stays open at a time and fixes the overlapping submenu issue.

Steps to Reproduce (Before Fix)

• Open a dropdown with nested submenus (dropend items).

• Click to open Submenu 3.

• Press ArrowUp multiple times.

• Submenu 3, 2, and 1 all remain open simultaneously.

Expected Behavior (After Fix)

✔ Only one submenu remains open at a time
✔ Upward navigation no longer reopens previous submenus
✔ Normal mouse behavior is unchanged
✔ Keyboard accessibility is improved and consistent

Tested On

• Windows

• Chrome

• Microsoft Edge

Works consistently across browsers.

Additional Notes

This change preserves Bootstrap’s existing navigation patterns while fixing a regression specific to nested dropdown keyboard navigation.

Type of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

[julien-deramond]

Thanks for creating a PR, @VishalManole7.
Please add the corresponding unit tests (or update existing ones when appropriate), unless it’s technically not possible. 🙏

[VishalManole7]

Hi, I’ve added the requested unit test for this fix.

Updates included:
• Added a new test:
js/tests/unit/dropdown.submenu.keyboard.test.js
This test covers the behavior where navigating upward with ArrowUp should close the previously opened submenu and prevent multiple menus from staying open simultaneously.
• Added an optional visual test for manual verification:
js/tests/visual/dropdown-submenu-keyboard.html

The test simulates:
1. Opening Submenu 1
2. Opening Submenu 2
3. Pressing ArrowUp
4. Verifying that Submenu 2 closes and Submenu 1 remains open

Let me know if any adjustments are needed.
Thanks!