Trying to expand a dropdown after expanding another dropdown breaks the focus

[dibsyjr1]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

We've found a bug when updating to version 5.3.6, I think it's specifically related to the following commit:
#41365

Essentially if you have more than one dropdown, expanding one and then another will break the focus as the fix above returns the focus to the previous trigger after the focus is applied to the current trigger.

In the included codepen click one of the buttons/triggers and then the other, the focus will be applied to the opposite button/trigger. I've made the focus a big red glow so that it's as clear as possible.

Reduced test cases

https://codepen.io/team/bootstrap/pen/qBamdLj

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.6

[mdo]

Your CodePen link doesn't have anything in it about dropdowns—please double check the link.

[nathan-muir]

Here's a working codepen --- https://codepen.io/nathan-muir/pen/XJbNWXW

Here's a video of the new broken focus behaviour (highlights the focused element in blue):

Screencast.from.2025-06-04.18-08-38.webm

---

It's clear the change from #41365 will just take focus whenever completeHide is called (usually after the closing animation ends). Instead, it could check if anything has focus (eg, document.activeElement? ).

[julien-deramond]

Thanks for reporting this issue @dibsyjr1
I can reproduce directly in the documentation. I can confirm that the issue comes from 24305e7.

There's another issue with tab navigation from one dropdown to another:

---

I did a quick local test with the following approach. It seemed to improve things, but also felt overly complex. There’s likely a cleaner or more efficient solution.

diff --git a/js/src/dropdown.js b/js/src/dropdown.js
index 88af932f7..7e608998e 100644
--- a/js/src/dropdown.js
+++ b/js/src/dropdown.js
@@ -208,8 +208,17 @@ class Dropdown extends BaseComponent {
     Manipulator.removeDataAttribute(this._menu, 'popper')
     EventHandler.trigger(this._element, EVENT_HIDDEN, relatedTarget)
 
-    // Explicitly return focus to the trigger element
-    this._element.focus()
+    // Return focus to trigger element if:
+    // 1. The dropdown was closed via keyboard (Escape key)
+    // 2. The dropdown was closed by clicking a dropdown item
+    // 3. The dropdown was closed by clicking outside (but not on a focusable element)
+    // 4. The dropdown was closed by tabbing to another dropdown (let the browser handle focus)
+    const isTabNavigation = relatedTarget.clickEvent?.type === 'keyup' && relatedTarget.clickEvent?.key === TAB_KEY
+    if (!isTabNavigation && (!relatedTarget.clickEvent ||
+        (relatedTarget.clickEvent && this._menu.contains(relatedTarget.clickEvent.target)) ||
+        (relatedTarget.clickEvent && !SelectorEngine.focusableChildren(document.body).includes(relatedTarget.clickEvent.target)))) {
+      this._element.focus()
+    }
   }
 
   _getConfig(config) {
@@ -379,14 +388,14 @@ class Dropdown extends BaseComponent {
         continue
       }
 
-      // Tab navigation through the dropdown menu or events from contained inputs shouldn't close the menu
+      // Don't close the dropdown if clicking on a focusable element inside the menu
       if (context._menu.contains(event.target) && ((event.type === 'keyup' && event.key === TAB_KEY) || /input|select|option|textarea|form/i.test(event.target.tagName))) {
         continue
       }
 
       const relatedTarget = { relatedTarget: context._element }
 
-      if (event.type === 'click') {
+      if (event.type === 'click' || event.type === 'keyup') {
         relatedTarget.clickEvent = event
       }