From 59cd71631ef342892208e18723643aa782e9ccac Mon Sep 17 00:00:00 2001
From: Daniele Faraglia <joke2k@users.noreply.github.com>
Date: Mon, 21 Dec 2020 12:37:35 +0000
Subject: [PATCH] collapse: prevent url change if `A` nested tag is clicked
 (#32438)

Co-authored-by: XhmikosR <xhmikosr@gmail.com>
---
 js/src/collapse.js             |  2 +-
 js/tests/unit/collapse.spec.js | 23 +++++++++++++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

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>',