collapse does not work with target IDs with '/'

[pierresouchay]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

When using collapse with IDs containing '/', the collapse does not work and crashes with the following error:

Uncaught DOMException: Document.querySelector: '#my/id' is not a valid selector (tested with FFx, Chrome and Safari)

This is because Document.querySelector expects the query to be properly escaped.

I think this might be fixed at

bootstrap/js/src/util/index.js

Line 55 in 886b940

return selector

=> by using something like

if (selector.startsWith("#")) { selector = "#" + CSS.escape(selector.substring(1)) }
return selector

=> which would escape properly the selector in a suitable way for document.querySelector() to work properly

Reduced test cases

Minimal test case (can be pasted in https://codepen.io/team/bootstrap/pen/qBamdLj):

<!-- Follow these instructions, please! -->
<div class="container py-5">
  <h1 class="h2">Bootstrap v5.0.2 Bug Report</h1>
  <p>REPORT: IDs containing slashes do crash. Such IDs need to be escaped before going thu document.querySelector()</p>
  <p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#my/id" role="button" aria-expanded="false" aria-controls="my/id">
    Link with href with my/id
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#my/id" aria-expanded="false" aria-controls="my/id">
    Button with data-bs-target with my/id
  </button>
</p>
<div class="collapse" id="my/id">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
</div>

What operating system(s) are you seeing the problem on?

macOS

What browser(s) are you seeing the problem on?

No response

What version of Bootstrap are you using?

v5.0.2