[Fix #19849] Tabs are opened even if disabled. (#20795)

* [Fix #19849] Tabs are opened even if disabled. * fix hund code review hints * rollback hound issues because Travis fails
twbs · Dec 25, 2016 · 9103bff · 9103bff
1 parent 0d96c63
commit 9103bff
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/js/src/tab.js b/js/src/tab.js
@@ -36,6 +36,7 @@ const Tab = (($) => {
   const ClassName = {
     DROPDOWN_MENU : 'dropdown-menu',
     ACTIVE        : 'active',
+    DISABLED      : 'disabled',
     FADE          : 'fade',
     SHOW          : 'show'
   }
@@ -79,7 +80,8 @@ const Tab = (($) => {
     show() {
       if (this._element.parentNode &&
           this._element.parentNode.nodeType === Node.ELEMENT_NODE &&
-          $(this._element).hasClass(ClassName.ACTIVE)) {
+          $(this._element).hasClass(ClassName.ACTIVE) ||
+          $(this._element).hasClass(ClassName.DISABLED)) {
         return
       }
 

diff --git a/js/tests/unit/tab.js b/js/tests/unit/tab.js
@@ -108,6 +108,44 @@ $(function () {
       .bootstrapTab('show')
   })
 
+  QUnit.test('should not fire shown when tab is already active', function (assert) {
+    assert.expect(0)
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+      + '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
+      + '<li class="nav-item"><a href="#profile" class="nav-link" role="tab">Profile</a></li>'
+      + '</ul>'
+      + '<div class="tab-content">'
+      + '<div class="tab-pane active" id="home" role="tabpanel"></div>'
+      + '<div class="tab-pane" id="profile" role="tabpanel"></div>'
+      + '</div>'
+
+    $(tabsHTML)
+      .find('a.active')
+      .on('shown.bs.tab', function () {
+        assert.ok(true, 'shown event fired')
+      })
+      .bootstrapTab('show')
+  })
+
+  QUnit.test('should not fire shown when tab is disabled', function (assert) {
+    assert.expect(0)
+    var tabsHTML = '<ul class="nav nav-tabs" role="tablist">'
+      + '<li class="nav-item"><a href="#home" class="nav-link active" role="tab">Home</a></li>'
+      + '<li class="nav-item"><a href="#profile" class="nav-link disabled" role="tab">Profile</a></li>'
+      + '</ul>'
+      + '<div class="tab-content">'
+      + '<div class="tab-pane active" id="home" role="tabpanel"></div>'
+      + '<div class="tab-pane" id="profile" role="tabpanel"></div>'
+      + '</div>'
+
+    $(tabsHTML)
+      .find('a.disabled')
+      .on('shown.bs.tab', function () {
+        assert.ok(true, 'shown event fired')
+      })
+      .bootstrapTab('show')
+  })
+
   QUnit.test('show and shown events should reference correct relatedTarget', function (assert) {
     assert.expect(2)
     var done = assert.async()