Skip to content

[BUG] Unable to use React.useId() hook as id for anchor element #836

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

Closed
gabrieljablonski opened this issue Dec 8, 2022 · 0 comments · Fixed by #838
Closed

[BUG] Unable to use React.useId() hook as id for anchor element #836

gabrieljablonski opened this issue Dec 8, 2022 · 0 comments · Fixed by #838
Labels

Comments

@gabrieljablonski
Copy link
Member

Describe the bug
When using React's useId() hook as the id for the anchor element, I'm faced with the following error:

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '#:r1b:' is not a valid selector.

This is because this component is using document.querySelector(`#${anchorId}`) to access the anchor DOM element, and ids generated by useId() (such as :r1b:) lead to an invalid selector ('#:r1b:').

Version of Package
v5.0.0

To Reproduce

  • Generate an id with React.useId().
  • Pass it to anchorId.
  • The error occurs.

Additional context
Since in v5 the component itself is using the useId(), there's no reason why we shouldn't be able to use for anchor ids as well.

One of the possible solutions is using the document.querySelector(`[id='${anchorId}']`) syntax instead, but I believe there are a few others.

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

Successfully merging a pull request may close this issue.

1 participant