diff options
| -rw-r--r-- | js/src/collapse.js | 2 | ||||
| -rw-r--r-- | js/tests/unit/collapse.spec.js | 23 |
2 files changed, 24 insertions, 1 deletions
diff --git a/js/src/collapse.js b/js/src/collapse.js index 90bab0ec9..0d3eeed54 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -371,7 +371,7 @@ class Collapse extends BaseComponent { EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) { // preventDefault only for <a> elements (which change the URL) not inside the collapsible element - if (event.target.tagName === 'A') { + if (event.target.tagName === 'A' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) { event.preventDefault() } diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index d53ab5964..4af21e13f 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -374,6 +374,29 @@ describe('Collapse', () => { }) describe('data-api', () => { + it('should prevent url change if click on nested elements', done => { + fixtureEl.innerHTML = [ + '<a role="button" data-bs-toggle="collapse" class="collapsed" href="#collapse">', + ' <span id="nested"></span>', + '</a>', + '<div id="collapse" class="collapse"></div>' + ].join('') + + const triggerEl = fixtureEl.querySelector('a') + const nestedTriggerEl = fixtureEl.querySelector('#nested') + + spyOn(Event.prototype, 'preventDefault').and.callThrough() + + triggerEl.addEventListener('click', event => { + expect(event.target.isEqualNode(nestedTriggerEl)).toEqual(true) + expect(event.delegateTarget.isEqualNode(triggerEl)).toEqual(true) + expect(Event.prototype.preventDefault).toHaveBeenCalled() + done() + }) + + nestedTriggerEl.click() + }) + it('should show multiple collapsed elements', done => { fixtureEl.innerHTML = [ '<a role="button" data-bs-toggle="collapse" class="collapsed" href=".multi"></a>', |