diff options
author | Johann-S <johann.servoire@gmail.com> | 2019-02-06 13:12:02 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-02-06 13:12:02 +0300 |
commit | 11880109fcafa07b4171c3e30e28fb98b3e21480 (patch) | |
tree | c7e749be33390f203ce58b8d207f37eb68efa55b | |
parent | 8217499640190e8eb72aa7214525faec3238b04a (diff) |
fix tabs, apply show class only when fade class is present (#28183)
-rw-r--r-- | js/src/tab.js | 5 | ||||
-rw-r--r-- | js/tests/unit/tab.js | 56 |
2 files changed, 60 insertions, 1 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index 64b66d8610..e49ac4b8c3 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -188,7 +188,10 @@ class Tab { } Util.reflow(element) - $(element).addClass(ClassName.SHOW) + + if (element.classList.contains(ClassName.FADE)) { + element.classList.add(ClassName.SHOW) + } if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) { const dropdownElement = $(element).closest(Selector.DROPDOWN)[0] diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js index 3ce29b6624..4491e14948 100644 --- a/js/tests/unit/tab.js +++ b/js/tests/unit/tab.js @@ -459,4 +459,60 @@ $(function () { }) .trigger($.Event('click')) }) + + QUnit.test('should not add show class to tab panes if there is no `.fade` class', function (assert) { + assert.expect(1) + var done = assert.async() + + var html = [ + '<ul class="nav nav-tabs" role="tablist">', + ' <li class="nav-item">', + ' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>', + ' </li>', + ' <li class="nav-item">', + ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>', + ' </li>', + '</ul>', + '<div class="tab-content">', + ' <div role="tabpanel" class="tab-pane" id="home">test 1</div>', + ' <div role="tabpanel" class="tab-pane" id="profile">test 2</div>', + '</div>' + ].join('') + + $(html).appendTo('#qunit-fixture') + + $('#secondNav').on('shown.bs.tab', function () { + assert.strictEqual($('.show').length, 0) + done() + }) + .trigger($.Event('click')) + }) + + QUnit.test('should add show class to tab panes if there is a `.fade` class', function (assert) { + assert.expect(1) + var done = assert.async() + + var html = [ + '<ul class="nav nav-tabs" role="tablist">', + ' <li class="nav-item">', + ' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>', + ' </li>', + ' <li class="nav-item">', + ' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>', + ' </li>', + '</ul>', + '<div class="tab-content">', + ' <div role="tabpanel" class="tab-pane fade" id="home">test 1</div>', + ' <div role="tabpanel" class="tab-pane fade" id="profile">test 2</div>', + '</div>' + ].join('') + + $(html).appendTo('#qunit-fixture') + + $('#secondNav').on('shown.bs.tab', function () { + assert.strictEqual($('.show').length, 1) + done() + }) + .trigger($.Event('click')) + }) }) |