Fix active class toggling of tabs within dropdown (#37151)

* Close #36947: fix active class toggling tabs within dropdown
twbs · Sep 21, 2022 · 2b46842 · 2b46842
1 parent 27f2025
commit 2b46842
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/js/src/tab.js b/js/src/tab.js
@@ -38,7 +38,6 @@ const CLASS_DROPDOWN = 'dropdown'
 
 const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
 const SELECTOR_DROPDOWN_MENU = '.dropdown-menu'
-const SELECTOR_DROPDOWN_ITEM = '.dropdown-item'
 const NOT_SELECTOR_DROPDOWN_TOGGLE = ':not(.dropdown-toggle)'
 
 const SELECTOR_TAB_PANEL = '.list-group, .nav, [role="tablist"]'
@@ -231,7 +230,6 @@ class Tab extends BaseComponent {
 
     toggle(SELECTOR_DROPDOWN_TOGGLE, CLASS_NAME_ACTIVE)
     toggle(SELECTOR_DROPDOWN_MENU, CLASS_NAME_SHOW)
-    toggle(SELECTOR_DROPDOWN_ITEM, CLASS_NAME_ACTIVE)
     outerElem.setAttribute('aria-expanded', open)
   }
 

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
@@ -840,10 +840,11 @@ describe('Tab', () => {
         '</ul>'
       ].join('')
 
-      const firstDropItem = fixtureEl.querySelector('.dropdown-item')
+      const dropItems = fixtureEl.querySelectorAll('.dropdown-item')
 
-      firstDropItem.click()
-      expect(firstDropItem).toHaveClass('active')
+      dropItems[1].click()
+      expect(dropItems[0]).not.toHaveClass('active')
+      expect(dropItems[1]).toHaveClass('active')
       expect(fixtureEl.querySelector('.nav-link')).not.toHaveClass('active')
     })