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.

Sign up for GitHub

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

Jump to bottom

"id" attributes with colons (:) break DOM selectors #877

Closed
EvHaus opened this issue Apr 27, 2023 · 2 comments · Fixed by #879
Closed

"id" attributes with colons (:) break DOM selectors #877

EvHaus opened this issue Apr 27, 2023 · 2 comments · Fixed by #879
Assignees
@capricorn86
Labels
bug Something isn't working

Comments

@EvHaus
Copy link

EvHaus commented Apr 27, 2023

Describe the bug

I'm building a React app. In React there's a useId() method which is used to generate unique id attributes for DOM elements. The values that useId() generates have colons (:), eg. <div id=":r1:" />.

It looks like happy-dom doesn't handle these very nicely and when you try to query elements by an ID with colons, happy-dom returns you back incorrect results.

To Reproduce

Use the following code:

// Create a div with an "id" with a colon
const el = document.createElement('div', { id: ':r1' });

// Append it to the body
document.body.appendChild(el);

// BUG: Query element by id in `happy-dom`
console.log(document.querySelector(CSS.escape(':r1:')).outerHTML);
// -> Expecting this to return the <div> I created, but it actually returns the root <html> element

// BUG: Similarly, if you do this:
console.log(document.body.closest(CSS.escape(':r1:')));
// -> I would expect it to return `null` because document.body doesn't have any parents with such an ID, but it weirdly returns the <body> element

Expected behavior
See notes above

Screenshots
N/A

Device:

  • OS: MacOS
  • Browser: Node.js
  • Version: happy-dom@9.9.2
@EvHaus EvHaus added the bug Something isn't working label Apr 27, 2023
@capricorn86 capricorn86 added good first issue Good for newcomers and removed good first issue Good for newcomers labels Apr 29, 2023
@capricorn86 capricorn86 self-assigned this Apr 29, 2023
capricorn86 added a commit that referenced this issue Apr 29, 2023
@capricorn86
#877@patch: Adds support for using escaped characters to ID:s in quer…
de0db65 
…y selectors (e.g. "#\:id").
@capricorn86 capricorn86 linked a pull request Apr 29, 2023 that will close this issue
#877@patch: Adds support for using escaped characters to ID:s in quer… #879
Merged
capricorn86 added a commit that referenced this issue Apr 29, 2023
@capricorn86
Merge pull request #879 from capricorn86/task/877-id-attributes-with-…
e3d2611 
…colons-break-dom-selectors

#877@patch: Adds support for using escaped characters to ID:s in quer…
@capricorn86
Copy link
Owner

Thank you for reporting @EvHaus! 🙂

The problem has been fixed.

You can read more about the release here:
https://github.com/capricorn86/happy-dom/releases/tag/v9.10.1

@EvHaus
Copy link
Author

EvHaus commented May 1, 2023

Thanks @capricorn86. Confirmed this works now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@capricorn86 capricorn86

Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

#877@patch: Adds support for using escaped characters to ID:s in quer… capricorn86/happy-dom
2 participants
@EvHaus @capricorn86