CommandItem value with special characters not escaped/removed throws a SyntaxError

[thechee]

A runtime SyntaxError is thrown by querySelector() that causes the React component tree to crash when the value or fallback textContent contains special characters. We discovered this when pen testers created a resource with a value of <a href="javascript:alert(1)">Click Me!</a> that when hovered crashed our app.

Rendering of the CommandItem on the DOM works as expected, as JSX escapes characters. However, when the CommandItem is hovered, document.querySelector('[data-value="..."]') causes a runtime error. This is because the data-value attribute is being set to an unescaped string.

I addressed this within our implementation by sanitizing the value prop with CSS.escape(value), or with a regex fallback, if the CSS object isn't available, replacing special characters with an empty string.

I believe this escapement should be addressed by the library, if possible. Thank you.

Screen.Recording.2025-10-16.at.10.07.48.AM.mov

[AyushNigam-1]

Hi, thanks for reporting this.

I’ve spent some time testing this against the current version of cmdk and also reviewed the relevant code paths. I’m not able to reproduce the runtime SyntaxError anymore, even when using values or fallback textContent with special characters (including quotes, brackets, and HTML-like strings).

From what I can see, selectors that previously interpolated raw data-value now appear to be handled safely (e.g. via non–value-based selectors or escaped values), so querySelector no longer throws.

Could you please confirm whether this is still reproducible on the latest version, or share an updated repro if you’re still seeing the issue? It’s possible this was fixed in the meantime.

Thanks!