rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

fix tabs, apply show class only when fade class is present (#28183)

Browse Source
This commit is contained in:
Johann-S 2019-02-06 11:12:02 +01:00 committed by GitHub
parent 8217499640
commit 11880109fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/tab.js
View File

@ -188,7 +188,10 @@ class Tab {
}
Util.reflow(element)
$(element).addClass(ClassName.SHOW)
if (element.classList.contains(ClassName.FADE)) {
element.classList.add(ClassName.SHOW)
}
if (element.parentNode && $(element.parentNode).hasClass(ClassName.DROPDOWN_MENU)) {
const dropdownElement = $(element).closest(Selector.DROPDOWN)[0]

56
js/tests/unit/tab.js
View File

@ -459,4 +459,60 @@ $(function () {
})
.trigger($.Event('click'))
})
QUnit.test('should not add show class to tab panes if there is no `.fade` class', function (assert) {
assert.expect(1)
var done = assert.async()
var html = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item">',
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
' </li>',
' <li class="nav-item">',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
' </li>',
'</ul>',
'<div class="tab-content">',
' <div role="tabpanel" class="tab-pane" id="home">test 1</div>',
' <div role="tabpanel" class="tab-pane" id="profile">test 2</div>',
'</div>'
].join('')
$(html).appendTo('#qunit-fixture')
$('#secondNav').on('shown.bs.tab', function () {
assert.strictEqual($('.show').length, 0)
done()
})
.trigger($.Event('click'))
})
QUnit.test('should add show class to tab panes if there is a `.fade` class', function (assert) {
assert.expect(1)
var done = assert.async()
var html = [
'<ul class="nav nav-tabs" role="tablist">',
' <li class="nav-item">',
' <a class="nav-link nav-tab" href="#home" role="tab" data-toggle="tab">Home</a>',
' </li>',
' <li class="nav-item">',
' <a id="secondNav" class="nav-link nav-tab" href="#profile" role="tab" data-toggle="tab">Profile</a>',
' </li>',
'</ul>',
'<div class="tab-content">',
' <div role="tabpanel" class="tab-pane fade" id="home">test 1</div>',
' <div role="tabpanel" class="tab-pane fade" id="profile">test 2</div>',
'</div>'
].join('')
$(html).appendTo('#qunit-fixture')
$('#secondNav').on('shown.bs.tab', function () {
assert.strictEqual($('.show').length, 1)
done()
})
.trigger($.Event('click'))
})
})