[Fix #17371][V4] Deactivating dropdown links in nav tab (#17642)

* Fix bug with dropdown tab links not deactivating when other tab or dropdown link is clicked

* Revise bug fix for more stability

diff --git a/js/src/tab.js b/js/src/tab.js
index 012d2f76fc63e5c3108650566b7df0398615b20f..9dc33e4da3aa6899f770c9a5dfd29d61e01f9785 100644 (file)
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -181,7 +181,7 @@ const Tab = (($) => {
       if (active) {
         $(active).removeClass(ClassName.ACTIVE)
 
-        let dropdownChild = $(active).find(
+        let dropdownChild = $(active.parentNode).find(
           Selector.DROPDOWN_ACTIVE_CHILD
         )[0]
 

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index 522ed0b3e488f8921a36c1e63d6d9cd0fed8d7d7..1f990f0f33692b55a91cbddb180c4e28352e624c 100644 (file)
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -241,4 +241,36 @@ $(function () {
     assert.strictEqual($tabs.find('a:not(.active)').attr('aria-expanded'), 'false', 'after second show event, hidden tab has aria-expanded = false')
   })
 
+  QUnit.test('selected tab should deactivate previous selected tab', function (assert) {
+    assert.expect(2)
+    var tabsHTML = '<ul class="nav nav-tabs">'
+        + '<li class="nav-item"><a class="nav-link active" href="#home" data-toggle="tab">Home</a></li>'
+        + '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
+        + '</ul>'
+    var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
+
+    $tabs.find('li:last a').trigger('click')
+    assert.notOk($tabs.find('li:first a').hasClass('active'))
+    assert.ok($tabs.find('li:last a').hasClass('active'))
+  })
+
+  QUnit.test('selected tab should deactivate previous selected link in dropdown', function (assert) {
+    assert.expect(3)
+    var tabsHTML = '<ul class="nav nav-tabs">'
+        + '<li class="nav-item"><a class="nav-link" href="#home" data-toggle="tab">Home</a></li>'
+        + '<li class="nav-item"><a class="nav-link" href="#profile" data-toggle="tab">Profile</a></li>'
+        + '<li class="nav-item dropdown"><a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#">Dropdown</a>'
+        + '<div class="dropdown-menu">'
+        + '<a class="dropdown-item active" href="#dropdown1" id="dropdown1-tab" data-toggle="tab">@fat</a>'
+        + '<a class="dropdown-item" href="#dropdown2" id="dropdown2-tab" data-toggle="tab">@mdo</a>'
+        + '</div>'
+        + '</li>'
+        + '</ul>'
+    var $tabs = $(tabsHTML).appendTo('#qunit-fixture')
+
+    $tabs.find('li:first > a').trigger('click')
+    assert.ok($tabs.find('li:first a').hasClass('active'))
+    assert.notOk($tabs.find('li:last > a').hasClass('active'))
+    assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active'))
+  })
 })