diff options
author | Daniele Faraglia <joke2k@users.noreply.github.com> | 2020-12-21 15:37:35 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-21 15:37:35 +0300 |
commit | 59cd71631ef342892208e18723643aa782e9ccac (patch) | |
tree | 553422787316c3c5c1655260fa7dadde9ae55603 /js | |
parent | 2d46e47464d15182c44a7d92c8f2476e70f4434e (diff) |
collapse: prevent url change if `A` nested tag is clicked (#32438)
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
Diffstat (limited to 'js')
-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 90bab0ec9a..0d3eeed54b 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 d53ab59643..4af21e13f0 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>', |