collapse does not work with target IDs with '/'
Created by: 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 https://github.com/twbs/bootstrap/blob/886b940796b3595a03b44230ca8b78197c5ee1c5/js/src/util/index.js#L55
=> 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