Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollspy creates an invalid query selector #39198

Open
3 tasks done
ctron opened this issue Sep 17, 2023 · 6 comments
Open
3 tasks done

Scrollspy creates an invalid query selector #39198

ctron opened this issue Sep 17, 2023 · 6 comments
Labels

Comments

@ctron
Copy link

ctron commented Sep 17, 2023

Prerequisites

Describe the issue

Having the scrollspy and and a link to a matrix account, in the form of https://matrix.to/#/@ctron:dentrassi.de or https://matrix.to/#%2F%40ctron%3Adentrassi.de causes and exception:

Uncaught DOMException: Element.querySelector: '#%2F%40ctron%3Adentrassi.de' is not a valid selector

Reduced test cases

https://codepen.io/julien-deramond/pen/qBLPYBd

  • Add the scrollspy
  • Add a link to href="https://matrix.to/#/@ctron:dentrassi.de"

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

Linux

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

Firefox

What version of Bootstrap are you using?

5.3.1

@github-actions
Copy link
Contributor

Hello @ctron. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.

@julien-deramond
Copy link
Member

Not enough info for now but might be linked to #39189

@ctron
Copy link
Author

ctron commented Sep 18, 2023

Not enough info for now but might be linked to #39189

It looks similar indeed. What information is missing?

@julien-deramond
Copy link
Member

If possible, please create a live demo of the issue so that we can reproduce it easily (see #39198 (comment)). It would save us a great deal of time 🙏

@ctron
Copy link
Author

ctron commented Sep 18, 2023

<!doctype html>
<html lang="en-US">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet"
        crossorigin="anonymous">

</head>

<body data-bs-spy="scroll" data-bs-target="#toc" tabindex="0">

<nav class="navbar navbar-expand-lg">
  <a target="_blank" href="https://matrix.to/#%2F%40ctron%3Adentrassi.de" title="Link to my matrix address">
    Foo
  </a>
</nav>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
        crossorigin="anonymous"></script>

</body>

</html>

@julien-deramond
Copy link
Member

CodePen created from this comment: https://codepen.io/julien-deramond/pen/qBLPYBd.
I've updated the description.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants