Bug: `useId()` is not valid when used as selector in e.g. `Element.closest('#' + id)`

[lensbart]

Perhaps not a bug in the true sense of the word, more a quality-of-life issue.

React version: latest (18.2.0)

Steps To Reproduce

import { useCallback, useId } from 'react'

const isElement = (e: EventTarget | null): e is Element => e instanceof Element

export const Component = () => {
 const id = useId()

 useEffect(() => {
 const handleClick = ({ target }: MouseEvent) => {
 if (isElement(target) && target.closest(`#${id}`) == null) {
 // do something
 }
 }
 document.addEventListener('click', handleClick)
 return () => {
 document.removeEventListener('click', handleClick)
 }
 }, [id])
 
 return <div id={id} />
}

The current behavior

• Safari: SyntaxError: The string did not match the expected pattern.
• Firefox: Uncaught DOMException: Element.closest: '#:r11:' is not a valid selector
• Chrome: Uncaught DOMException: Failed to execute 'closest' on 'Element': '#:r11:' is not a valid selector.

This error is not thrown when using an alphanumeric id such as #watskeburt

The expected behavior

The return value of useId being directly usable in Element.closest(`#${id}`)

Workaround

target.closest(`#${id.replace(/:/g, '\\:')}`)

[lensbart]

Perhaps this issue can be closed, if : was specifically chosen to prevent ambiguous behaviour (naming collision with manually chosen id’s).

Reading https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#escaping_special_characters, it seems like a better workaround is to use target.closest(`#${id.replace(/:/g, '\\:')}`)

[gaearon]

Perhaps this issue can be closed, if : was specifically chosen to prevent ambiguous behaviour (naming collision with manually chosen id’s).

Yep.

For your concrete use, would a ref not be more appropriate?

[lensbart]

Thanks for the quick response, Dan. I’ll close the issue.

Maybe I’m missing something, but with a ref, I think I’d need to iterate manually over the parent elements to see if they match, whereas with Element.closest I’d be able to use a CSS query selector, which is simpler. But feel free to enlighten me, should you disagree and have a minute to spare. 😊

[gaearon]

I was thinking you'd do ref.current.contains(e.target) to check.

[lensbart]

Node.contains() — you learn something new every day!