mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-07 06:06:47 +02:00
Code Issues Releases Wiki Activity

Collapse on toggle, should not hide descendant tabpanels (#34835)

Browse Source
This commit is contained in:
GeoSot
2021-08-30 15:29:02 +03:00
committed by GitHub
parent d9254c64fa
commit c1fc1dbbee
2 changed files with 51 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/collapse.js
View File

@@ -55,7 +55,7 @@ const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
const WIDTH = 'width' const WIDTH = 'width'
const HEIGHT = 'height' const HEIGHT = 'height'
const SELECTOR_ACTIVES = '.show, .collapsing' const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
/** /**

50
js/tests/unit/collapse.spec.js
View File

@@ -267,6 +267,56 @@ describe('Collapse', () => {
collapse.show() collapse.show()
}) })
it('should not change tab tabpanels descendants on accordion', done => {
fixtureEl.innerHTML = [
'<div class="accordion" id="accordionExample">',
' <div class="accordion-item">',
' <h2 class="accordion-header" id="headingOne">',
' <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">',
' Accordion Item #1',
' </button>',
' </h2>',
' <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">',
' <div class="accordion-body">',
' <nav>',
' <div class="nav nav-tabs" id="nav-tab" role="tablist">',
' <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>',
' <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>',
' </div>',
' </nav>',
' <div class="tab-content" id="nav-tabContent">',
' <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">Home</div>',
' <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">Profile</div>',
' </div>',
' </div>',
' </div>',
' </div>',
' </div>'
].join('')
// const btn = fixtureEl.querySelector('[data-bs-target="#collapseOne"]')
const el = fixtureEl.querySelector('#collapseOne')
const activeTabPane = fixtureEl.querySelector('#nav-home')
const collapse = new Collapse(el)
let times = 1
el.addEventListener('hidden.bs.collapse', () => {
setTimeout(() => collapse.show(), 10)
})
el.addEventListener('shown.bs.collapse', () => {
expect(activeTabPane.classList.contains('show')).toEqual(true)
times++
if (times === 2) {
done()
}
collapse.hide()
})
collapse.show()
})
it('should not fire shown when show is prevented', done => { it('should not fire shown when show is prevented', done => {
fixtureEl.innerHTML = '<div class="collapse"></div>' fixtureEl.innerHTML = '<div class="collapse"></div>'