0
0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00

[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
This commit is contained in:
Alessandro Rodi 2016-12-25 08:31:34 +01:00 committed by Mark Otto
parent 0d96c633b3
commit 9103bffe37
2 changed files with 41 additions and 1 deletions

View File

@ -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
}

View File

@ -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()