rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Fix v5 regressions in tab dropdown functionality (#33626)

Browse Source 
Scope selector to `dropdownElement` when adding active classes
This commit is contained in:
Carson Sievert 2021-04-15 05:53:55 -05:00 committed by GitHub
parent f61a0218b3
commit 69f5c0130b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/tab.js
View File

@ -166,7 +166,7 @@ class Tab extends BaseComponent {
const dropdownElement = element.closest(SELECTOR_DROPDOWN)
if (dropdownElement) {
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE)
SelectorEngine.find(SELECTOR_DROPDOWN_TOGGLE, dropdownElement)
.forEach(dropdown => dropdown.classList.add(CLASS_NAME_ACTIVE))
}

35
js/tests/unit/tab.spec.js
View File

@ -532,6 +532,41 @@ describe('Tab', () => {
expect(fixtureEl.querySelector('li:last-child .dropdown-menu a:first-child').classList.contains('active')).toEqual(false)
})
it('selecting a dropdown tab does not activate another', () => {
const nav1 = [
'<ul class="nav nav-tabs" id="nav1">',
' <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
' <li class="nav-item dropdown">',
' <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
' </div>',
' </li>',
'</ul>'
].join('')
const nav2 = [
'<ul class="nav nav-tabs" id="nav2">',
' <li class="nav-item active"><a class="nav-link" href="#home" data-bs-toggle="tab">Home</a></li>',
' <li class="nav-item dropdown">',
' <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>',
' <div class="dropdown-menu">',
' <a class="dropdown-item" href="#dropdown1" id="dropdown1-tab" data-bs-toggle="tab">@fat</a>',
' </div>',
' </li>',
'</ul>'
].join('')
fixtureEl.innerHTML = nav1 + nav2
const firstDropItem = fixtureEl.querySelector('#nav1 .dropdown-item')
firstDropItem.click()
expect(firstDropItem.classList.contains('active')).toEqual(true)
expect(fixtureEl.querySelector('#nav1 .dropdown-toggle').classList.contains('active')).toEqual(true)
expect(fixtureEl.querySelector('#nav2 .dropdown-toggle').classList.contains('active')).toEqual(false)
expect(fixtureEl.querySelector('#nav2 .dropdown-item').classList.contains('active')).toEqual(false)
})
it('should handle nested tabs', done => {
fixtureEl.innerHTML = [
'<nav class="nav nav-tabs" role="tablist">',