diff options
-rw-r--r-- | js/src/tab.js | 4 | ||||
-rw-r--r-- | js/tests/unit/tab.js | 38 |
2 files changed, 41 insertions, 1 deletions
diff --git a/js/src/tab.js b/js/src/tab.js index c7e5fbfbe9..2f4e453e06 100644 --- 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 index 8b6f31f83e..62eece896a 100644 --- 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() |