diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-08-30 15:29:02 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-30 15:29:02 +0300 |
commit | c1fc1dbbee7dcda176f54a76479b9e47d9a5b1de (patch) | |
tree | bc4ab72d7e07bd037b231deaa5a609af27aed5b7 | |
parent | d9254c64fa10f465a671a47ce40779807f092f5a (diff) |
Collapse on toggle, should not hide descendant tabpanels (#34835)
-rw-r--r-- | js/src/collapse.js | 2 | ||||
-rw-r--r-- | js/tests/unit/collapse.spec.js | 50 |
2 files changed, 51 insertions, 1 deletions
diff --git a/js/src/collapse.js b/js/src/collapse.js index f39c55b92f..17edae9ae2 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -55,7 +55,7 @@ const CLASS_NAME_HORIZONTAL = 'collapse-horizontal' const WIDTH = 'width' const HEIGHT = 'height' -const SELECTOR_ACTIVES = '.show, .collapsing' +const SELECTOR_ACTIVES = '.collapse.show, .collapse.collapsing' const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]' /** diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 6220623fc1..ece88eff58 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -267,6 +267,56 @@ describe('Collapse', () => { 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 => { fixtureEl.innerHTML = '<div class="collapse"></div>' |