From 69f5c0130b4f13e0dc22d86bf1bbe1b362891cd7 Mon Sep 17 00:00:00 2001
From: Carson Sievert <cpsievert1@gmail.com>
Date: Thu, 15 Apr 2021 05:53:55 -0500
Subject: [PATCH] Fix v5 regressions in tab dropdown functionality (#33626)

Scope selector to `dropdownElement` when adding active classes
---
 js/src/tab.js             |  2 +-
 js/tests/unit/tab.spec.js | 35 +++++++++++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)

diff --git a/js/src/tab.js b/js/src/tab.js
index 3c5ced502b75..ffca5f299ee6 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -166,7 +166,7 @@ class Tab extends BaseComponent {
       const dropdownElement = element.closest(SELECTOR_DROPDOWN)
 
       if (dropdownElement) {
-        SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE)
+        SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement)
           .forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE))
       }
 
diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
index 231cf894c0f4..5b98bad9d508 100644
--- a/js/tests/unit/tab.spec.js
+++ b/js/tests/unit/tab.spec.js
@@ -532,6 +532,41 @@ describe('Tab', () => {
       expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child').classList.contains('active')).toEqual(false)
     })
 
+    it('selecting a dropdown tab does not activate another', () => {
+      const nav1 = [
+        '<ul class="nav nav-tabs" id="nav1">',
+        '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item dropdown">',
+        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <div class="dropdown-menu">',
+        '      <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
+        '    </div>',
+        '  </li>',
+        '</ul>'
+      ].join('')
+      const nav2 = [
+        '<ul class="nav nav-tabs" id="nav2">',
+        '  <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
+        '  <li class="nav-item dropdown">',
+        '    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
+        '    <div class="dropdown-menu">',
+        '      <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
+        '    </div>',
+        '  </li>',
+        '</ul>'
+      ].join('')
+
+      fixtureEl.innerHTML = nav1 + nav2
+
+      const firstDropItem = fixtureEl.querySelector('#nav1 .dropdown-item')
+
+      firstDropItem.click()
+      expect(firstDropItem.classList.contains('active')).toEqual(true)
+      expect(fixtureEl.querySelector('#nav1 .dropdown-toggle').classList.contains('active')).toEqual(true)
+      expect(fixtureEl.querySelector('#nav2 .dropdown-toggle').classList.contains('active')).toEqual(false)
+      expect(fixtureEl.querySelector('#nav2 .dropdown-item').classList.contains('active')).toEqual(false)
+    })
+
     it('should handle nested tabs', done => {
       fixtureEl.innerHTML = [
         '<nav class="nav nav-tabs" role="tablist">',