diff options
-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')) + }) }) |