rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-03 03:29:21 +01:00
Code Issues Actions Packages Releases Activity

Fix Collapse regression of handling toggling between sibling chilldren (#34951)

Browse Source
This commit is contained in:
GeoSot 2021-09-15 15:33:19 +03:00 committed by GitHub
parent 8f2e678424
commit bdfb4cc54d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/collapse.js
View File

@ -50,6 +50,7 @@ const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_COLLAPSE = 'collapse' const CLASS_NAME_COLLAPSE = 'collapse'
const CLASS_NAME_COLLAPSING = 'collapsing' const CLASS_NAME_COLLAPSING = 'collapsing'
const CLASS_NAME_COLLAPSED = 'collapsed' const CLASS_NAME_COLLAPSED = 'collapsed'
const CLASS_NAME_DEEPER_CHILDREN = `:scope .${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`
const CLASS_NAME_HORIZONTAL = 'collapse-horizontal' const CLASS_NAME_HORIZONTAL = 'collapse-horizontal'
const WIDTH = 'width' const WIDTH = 'width'
@ -126,7 +127,7 @@ class Collapse extends BaseComponent {
let activesData let activesData
if (this._config.parent) { if (this._config.parent) {
const children = SelectorEngine.find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent) const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth actives = SelectorEngine.find(SELECTOR_ACTIVES, this._config.parent).filter(elem => !children.includes(elem)) // remove children if greater depth
} }
@ -253,7 +254,7 @@ class Collapse extends BaseComponent {
return return
} }
const children = SelectorEngine.find(`.${CLASS_NAME_COLLAPSE} .${CLASS_NAME_COLLAPSE}`, this._config.parent) const children = SelectorEngine.find(CLASS_NAME_DEEPER_CHILDREN, this._config.parent)
SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem)) SelectorEngine.find(SELECTOR_DATA_TOGGLE, this._config.parent).filter(elem => !children.includes(elem))
.forEach(element => { .forEach(element => {
const selected = getElementFromSelector(element) const selected = getElementFromSelector(element)

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

@ -267,6 +267,63 @@ describe('Collapse', () => {
collapse.show() collapse.show()
}) })
it('should be able to handle toggling of other children siblings', done => {
fixtureEl.innerHTML = [
'<div id="parentGroup" class="accordion">',
' <div id="parentHeader" class="accordion-header">',
' <button data-bs-target="#parentContent" data-bs-toggle="collapse" role="button" class="accordion-toggle">Parent</button>',
' </div>',
' <div id="parentContent" class="accordion-collapse collapse" aria-labelledby="parentHeader" data-bs-parent="#parentGroup">',
' <div class="accordion-body">',
' <div id="childGroup" class="accordion">',
' <div class="accordion-item">',
' <div id="childHeader1" class="accordion-header">',
' <button data-bs-target="#childContent1" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 1</button>',
' </div>',
' <div id="childContent1" class="accordion-collapse collapse" aria-labelledby="childHeader1" data-bs-parent="#childGroup">',
' <div>content</div>',
' </div>',
' </div>',
' <div class="accordion-item">',
' <div id="childHeader2" class="accordion-header">',
' <button data-bs-target="#childContent2" data-bs-toggle="collapse" role="button" class="accordion-toggle">Child 2</button>',
' </div>',
' <div id="childContent2" class="accordion-collapse collapse" aria-labelledby="childHeader2" data-bs-parent="#childGroup">',
' <div>content</div>',
' </div>',
' </div>',
' </div>',
' </div>',
' </div>',
'</div>'
].join('')
const el = selector => fixtureEl.querySelector(selector)
const parentBtn = el('[data-bs-target="#parentContent"]')
const childBtn1 = el('[data-bs-target="#childContent1"]')
const childBtn2 = el('[data-bs-target="#childContent2"]')
const parentCollapseEl = el('#parentContent')
const childCollapseEl1 = el('#childContent1')
const childCollapseEl2 = el('#childContent2')
parentCollapseEl.addEventListener('shown.bs.collapse', () => {
expect(parentCollapseEl.classList.contains('show')).toEqual(true)
childBtn1.click()
})
childCollapseEl1.addEventListener('shown.bs.collapse', () => {
expect(childCollapseEl1.classList.contains('show')).toEqual(true)
childBtn2.click()
})
childCollapseEl2.addEventListener('shown.bs.collapse', () => {
expect(childCollapseEl2.classList.contains('show')).toEqual(true)
expect(childCollapseEl1.classList.contains('show')).toEqual(false)
done()
})
parentBtn.click()
})
it('should not change tab tabpanels descendants on accordion', done => { it('should not change tab tabpanels descendants on accordion', done => {
fixtureEl.innerHTML = [ fixtureEl.innerHTML = [
'<div class="accordion" id="accordionExample">', '<div class="accordion" id="accordionExample">',