Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

tabs: fix nested tabs. #23087

Merged
merged 4 commits into from
Aug 11, 2017
Merged

tabs: fix nested tabs. #23087

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b55fa55
tabs: make the `active` selector more restrictive again.
XhmikosR Jul 14, 2017
640c130
When we show our tabs element use children to be more restrictive
Johann-S Jul 16, 2017
edf90c1
Add unit test for nested tabs
Johann-S Jul 17, 2017
2eb1e68
Improve previous selector for nested tabs
Johann-S Jul 18, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
13 changes: 11 additions & 2 deletions js/src/tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const Tab = (($) => {
DROPDOWN : '.dropdown',
NAV_LIST_GROUP : '.nav, .list-group',
ACTIVE : '.active',
ACTIVE_UL : '> li > .active',
DATA_TOGGLE : '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]',
DROPDOWN_TOGGLE : '.dropdown-toggle',
DROPDOWN_ACTIVE_CHILD : '> .dropdown-menu .active'
Expand Down Expand Up @@ -87,7 +88,8 @@ const Tab = (($) => {
const selector = Util.getSelectorFromElement(this._element)

if (listElement) {
previous = $.makeArray($(listElement).find(Selector.ACTIVE))
const itemSelector = listElement.nodeName === 'UL' ? Selector.ACTIVE_UL : Selector.ACTIVE
previous = $.makeArray($(listElement).find(itemSelector))
previous = previous[previous.length - 1]
}

Expand Down Expand Up @@ -148,7 +150,14 @@ const Tab = (($) => {
// private

_activate(element, container, callback) {
const active = $(container).find(Selector.ACTIVE)[0]
let activeElements
if (container.nodeName === 'UL') {
activeElements = $(container).find(Selector.ACTIVE_UL)
} else {
activeElements = $(container).children(Selector.ACTIVE)
}

const active = activeElements[0]
const isTransitioning = callback
&& Util.supportsTransitionEnd()
&& (active && $(active).hasClass(ClassName.FADE))
Expand Down
53 changes: 46 additions & 7 deletions js/tests/unit/tab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,13 +182,14 @@ $(function () {
assert.expect(2)
var done = assert.async()

var dropHTML = '<ul class="drop nav">'
+ '<li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
+ '<ul class="dropdown-menu">'
+ '<li><a href="#1-1" data-toggle="tab">1-1</a></li>'
+ '<li><a href="#1-2" data-toggle="tab">1-2</a></li>'
+ '</ul>'
+ '</li>'
var dropHTML =
'<ul class="drop nav">'
+ ' <li class="dropdown"><a data-toggle="dropdown" href="#">1</a>'
+ ' <ul class="dropdown-menu nav">'
+ ' <li><a href="#1-1" data-toggle="tab">1-1</a></li>'
+ ' <li><a href="#1-2" data-toggle="tab">1-2</a></li>'
+ ' </ul>'
+ ' </li>'
+ '</ul>'

$(dropHTML)
Expand Down Expand Up @@ -343,4 +344,42 @@ $(function () {
assert.notOk($tabs.find('li:last > a').hasClass('active'))
assert.notOk($tabs.find('li:last > .dropdown-menu > a:first').hasClass('active'))
})

QUnit.test('Nested tabs', function (assert) {
assert.expect(2)
var done = assert.async()
var tabsHTML =
'<nav class="nav nav-tabs" role="tablist">'
+ ' <a id="tab1" href="#x-tab1" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab1">Tab 1</a>'
+ ' <a href="#x-tab2" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab2" aria-expanded="true">Tab 2</a>'
+ ' <a href="#x-tab3" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-tab3">Tab 3</a>'
+ '</nav>'
+ '<div class="tab-content">'
+ ' <div class="tab-pane" id="x-tab1" role="tabpanel">'
+ ' <nav class="nav nav-tabs" role="tablist">'
+ ' <a href="#nested-tab1" class="nav-item nav-link active" data-toggle="tab" role="tab" aria-controls="x-tab1" aria-expanded="true">Nested Tab 1</a>'
+ ' <a id="tabNested2" href="#nested-tab2" class="nav-item nav-link" data-toggle="tab" role="tab" aria-controls="x-profile">Nested Tab2</a>'
+ ' </nav>'
+ ' <div class="tab-content">'
+ ' <div class="tab-pane active" id="nested-tab1" role="tabpanel">Nested Tab1 Content</div>'
+ ' <div class="tab-pane" id="nested-tab2" role="tabpanel">Nested Tab2 Content</div>'
+ ' </div>'
+ ' </div>'
+ ' <div class="tab-pane active" id="x-tab2" role="tabpanel">Tab2 Content</div>'
+ ' <div class="tab-pane" id="x-tab3" role="tabpanel">Tab3 Content</div>'
+ '</div>'

$(tabsHTML).appendTo('#qunit-fixture')

$('#tabNested2').on('shown.bs.tab', function () {
assert.ok($('#x-tab1').hasClass('active'))
done()
})

$('#tab1').on('shown.bs.tab', function () {
assert.ok($('#x-tab1').hasClass('active'))
$('#tabNested2').trigger($.Event('click'))
})
.trigger($.Event('click'))
})
})