ref(tab): remove show from panels dependent-less they have .fade cl…

…ass or not (simplify checks) (#36622)
twbs · Jun 27, 2022 · f14c58f · f14c58f
1 parent 8de0488
commit f14c58f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 14 deletions.
diff --git a/js/src/tab.js b/js/src/tab.js
@@ -109,13 +109,9 @@ class Tab extends BaseComponent {
 
     this._activate(getElementFromSelector(element)) // Search and activate/show the proper section
 
-    const isAnimated = element.classList.contains(CLASS_NAME_FADE)
     const complete = () => {
-      if (isAnimated) { // todo: maybe is redundant
-        element.classList.add(CLASS_NAME_SHOW)
-      }
-
       if (element.getAttribute('role') !== 'tab') {
+        element.classList.add(CLASS_NAME_SHOW)
         return
       }
 
@@ -128,7 +124,7 @@ class Tab extends BaseComponent {
       })
     }
 
-    this._queueCallback(complete, element, isAnimated)
+    this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
   }
 
   _deactivate(element, relatedElem) {
@@ -141,13 +137,9 @@ class Tab extends BaseComponent {
 
     this._deactivate(getElementFromSelector(element)) // Search and deactivate the shown section too
 
-    const isAnimated = element.classList.contains(CLASS_NAME_FADE)
     const complete = () => {
-      if (isAnimated) { // todo maybe is redundant
-        element.classList.remove(CLASS_NAME_SHOW)
-      }
-
       if (element.getAttribute('role') !== 'tab') {
+        element.classList.remove(CLASS_NAME_SHOW)
         return
       }
 
@@ -157,7 +149,7 @@ class Tab extends BaseComponent {
       EventHandler.trigger(element, EVENT_HIDDEN, { relatedTarget: relatedElem })
     }
 
-    this._queueCallback(complete, element, isAnimated)
+    this._queueCallback(complete, element, element.classList.contains(CLASS_NAME_FADE))
   }
 
   _keydown(event) {

diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js
@@ -904,7 +904,7 @@ describe('Tab', () => {
       })
     })
 
-    it('should not add `show` class to tab panes if there is no `.fade` class', () => {
+    it('should add `show` class to tab panes if there is no `.fade` class', () => {
       return new Promise(resolve => {
         fixtureEl.innerHTML = [
           '<ul class="nav nav-tabs" role="tablist">',
@@ -924,7 +924,7 @@ describe('Tab', () => {
         const secondNavEl = fixtureEl.querySelector('#secondNav')
 
         secondNavEl.addEventListener('shown.bs.tab', () => {
-          expect(fixtureEl.querySelectorAll('.show')).toHaveSize(0)
+          expect(fixtureEl.querySelectorAll('.tab-content .show')).toHaveSize(1)
           resolve()
         })