fix tabs, apply show class only when fade class is present (#28183)

diff --git a/js/src/tab.js b/js/src/tab.js
index 64b66d8610947d2c94134c6fcf88b9efb245cf63..e49ac4b8c3e9b0235a86dc8eeccca076dc58cdab 100644 (file)
--- 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 3ce29b66240826146a8792003024f06ca67f456f..4491e14948c4fe02dd161bcf549720dd734c4102 100644 (file)
--- 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'))
+  })
 })