tab.js: do not remove fade class if there's no initial active pane

2 files changed, 37 insertions, 14 deletions

diff --git a/js/src/tab.js b/js/src/tab.js
index 1d4178687d..e299f0b128 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -166,7 +166,6 @@ const Tab = (($) => {
       const complete = () => this._transitionComplete(
         element,
         active,
-        isTransitioning,
         callback
       )
 
@@ -174,19 +173,14 @@ const Tab = (($) => {
         $(active)
           .one(Util.TRANSITION_END, complete)
           .emulateTransitionEnd(TRANSITION_DURATION)
-
       } else {
         complete()
       }
-
-      if (active) {
-        $(active).removeClass(ClassName.SHOW)
-      }
     }
 
-    _transitionComplete(element, active, isTransitioning, callback) {
+    _transitionComplete(element, active, callback) {
       if (active) {
-        $(active).removeClass(ClassName.ACTIVE)
+        $(active).removeClass(`${ClassName.SHOW} ${ClassName.ACTIVE}`)
 
         const dropdownChild = $(active.parentNode).find(
           Selector.DROPDOWN_ACTIVE_CHILD
@@ -206,12 +200,8 @@ const Tab = (($) => {
         element.setAttribute('aria-selected', true)
       }
 
-      if (isTransitioning) {
-        Util.reflow(element)
-        $(element).addClass(ClassName.SHOW)
-      } else {
-        $(element).removeClass(ClassName.FADE)
-      }
+      Util.reflow(element)
+      $(element).addClass(ClassName.SHOW)
 
       if (element.parentNode &&
           $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
index c26f076009..ee88bad305 100644
--- a/js/tests/unit/tab.js
+++ b/js/tests/unit/tab.js
@@ -382,4 +382,37 @@ $(function () {
     })
     .trigger($.Event('click'))
   })
+
+  QUnit.test('should not remove fade class if no active pane is present', function (assert) {
+    assert.expect(6)
+    var done = assert.async()
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+      + '<li class="nav-item"><a id="tab-home" href="#home" class="nav-link" data-toggle="tab" role="tab">Home</a></li>'
+      + '<li class="nav-item"><a id="tab-profile" href="#profile" class="nav-link" data-toggle="tab" role="tab">Profile</a></li>'
+      + '</ul>'
+      + '<div class="tab-content">'
+      + '<div class="tab-pane fade" id="home" role="tabpanel"></div>'
+      + '<div class="tab-pane fade" id="profile" role="tabpanel"></div>'
+      + '</div>'
+
+
+    $(tabsHTML).appendTo('#qunit-fixture')
+    $('#tab-profile')
+      .on('shown.bs.tab', function () {
+        assert.ok($('#profile').hasClass('fade'))
+        assert.ok($('#profile').hasClass('show'))
+
+        $('#tab-home')
+          .on('shown.bs.tab', function () {
+            assert.ok($('#profile').hasClass('fade'))
+            assert.notOk($('#profile').hasClass('show'))
+            assert.ok($('#home').hasClass('fade'))
+            assert.ok($('#home').hasClass('show'))
+
+            done()
+          })
+          .trigger($.Event('click'))
+      })
+      .trigger($.Event('click'))
+  })
 })