Skip to content
GitLab
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Issues
  • #35565
Closed
Open
Issue created Dec 17, 2021 by Administrator@rootContributor3 of 3 checklist items completed3/3 checklist items

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

Assignee
Assign to
Time tracking