Prerequisites
Describe the issue
What does this fix?
When using data-bs-auto-close="outside" with nested submenus,
pressing the arrow keys caused multiple submenus to remain open
at the same time instead of auto-closing the previous one.
Root Cause
In dataApiKeydownHandler, instance.show() was called
unconditionally on every arrow key press, re-showing already
dismissed dropdowns.
Fix
Wrapped instance.show() with a !instance._isShown() check
so it only opens the dropdown if it is not already visible.
Steps to reproduce
- Click Demo top level menu
- Click Submenu 3
- Press Arrow Up multiple times
- Previously: all submenus stayed open ❌
- Now: only current submenu shows ✅
Reduced test cases
Demo
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Firefox, Chrome
What version of Bootstrap are you using?
v5.3.7
Prerequisites
Describe the issue
What does this fix?
When using data-bs-auto-close="outside" with nested submenus,
pressing the arrow keys caused multiple submenus to remain open
at the same time instead of auto-closing the previous one.
Root Cause
In dataApiKeydownHandler, instance.show() was called
unconditionally on every arrow key press, re-showing already
dismissed dropdowns.
Fix
Wrapped instance.show() with a !instance._isShown() check
so it only opens the dropdown if it is not already visible.
Steps to reproduce
Reduced test cases
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Firefox, Chrome
What version of Bootstrap are you using?
v5.3.7