collapse: prevent url change if A nested tag is clicked

[joke2k]

Removing jQuery the target of the click event is not the A tag if the user clicks on a nested tag,
ignoring the preventDefault and changing the hash in the url.

What this PR does:

• Add event.delegateTarget into the check for preventDefault
• Test this behaviour

Details:

this code:

<a role="button" data-bs-toggle="collapse" class="collapsed" href="#collapse">
  <span id="nested">Clickme</span>
</a>
<div id="collapse" class="collapse"></div>

bubbles ups the default behaviour and changes the URL appending #collapse to it because the event.target is not an A tag, this let fail the check for event.preventDefault.

See on bs5:

bootstrap/js/src/collapse.js

Lines 372 to 376 in 764e529

	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') {
	event.preventDefault()
	}

On bs4 jQuery did the work:

bootstrap/js/src/collapse.js

Lines 361 to 365 in a716fb0

	$(document).on(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.currentTarget.tagName === 'A') {
	event.preventDefault()
	}

it happened with this commit 69e4d4f#diff-3cc7f0d8580d17c90274789ffc45552c56fed69ac7404d65e88ccccb81ffff31R378

[XhmikosR]

We need tests for this, can you add a test please?

[joke2k]

emm... tests were already in the PR 😅

[XhmikosR]

Oops, sorry I missed them!

[XhmikosR]

Are you sure this describe is the right place?

[joke2k]

I think it is a bug of the data-api as you can see from the part of collapse.js file:

/**
 * ------------------------------------------------------------------------
 * Data Api implementation
 * ------------------------------------------------------------------------
 */

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' || (event.delegateTarget && event.delegateTarget.tagName === 'A')) {
    event.preventDefault()
  }

[joke2k]

Is It right?