diff options
author | Matt Hernandez <matt.isaiah.hernandez@gmail.com> | 2016-11-26 01:56:41 +0300 |
---|---|---|
committer | Mark Otto <markd.otto@gmail.com> | 2016-11-26 01:56:41 +0300 |
commit | b1b1f30cbd0f4f620047dc158cf91e328eeecc6b (patch) | |
tree | 2576dbf392eb9059270e209644142ec869df4466 /js | |
parent | 3593ee85c1c8aed948bbe636194fcd5f0988878e (diff) |
[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
Diffstat (limited to 'js')
-rw-r--r-- | js/src/tab.js | 2 | ||||
-rw-r--r-- | js/tests/unit/tab.js | 32 |
2 files changed, 33 insertions, 1 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index 012d2f76fc..9dc33e4da3 100644 --- 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 522ed0b3e4..1f990f0f33 100644 --- 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')) + }) }) |