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

* Close #36947: fix active class toggling tabs within dropdown

diff --git a/js/src/tab.js b/js/src/tab.js
index 31dcec4a4b5c620dbd377d44fe75f8bf5b537fe2..1d6d68d85ce1580154cdf694b1cc18caf028cdb1 100644 (file)
--- 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
index 15d581173601ffe989a928df8f7a363d88994cce..b00014eed0b04e684b338342ba9d357b4fa7c094 100644 (file)
--- 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')
     })