collapse: prevent url change if `A` nested tag is clicked (#32438)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/js/src/collapse.js b/js/src/collapse.js
index 90bab0ec9a7688b639d1ac72b55e66c9aa888a96..0d3eeed54b987c181d22b36c80b1f4855c137d47 100644 (file)
--- 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 d53ab59643d00b649f4429111ac4ecf9cbdc81c0..4af21e13f001d185cc75ab92482dab86bfe7fc29 100644 (file)
--- 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>',