querySelector issue introduced in 0.2.1

[etcd]

The latest update v0.2.1 introduces a bug that was not present in v0.2.0. The following error is thrown when the child of a CommandItem includes a string with the quote character ("):

SyntaxError: Failed to execute 'querySelector' on 'Element': '[cmdk-item=""][data-value="""]' is not a valid selector.

[pacocoursey]

Fixed in 8aecf2d, will release soon.

[theboxer]

@pacocoursey any ETA on when the new release will be out?

[etcd]

@pacocoursey Sorry to bother again, but this is a major regression that was introduced in a minor version bump, so this will introduce silent runtime failures for more people (anyone who pinned the minor version) the longer a hotfix isn't deployed

[gokulkrishh]

Thanks @pacocoursey. Looking forward for the fix.

[pacocoursey]

https://github.com/pacocoursey/cmdk/releases/tag/v1.0.0

[TylerJNewman]

Workaround for CommandItem value with quotes

By default, CommandItem uses its children as the value for search matching. If the children contain quotes, this can cause issues. You can avoid this by explicitly setting the value prop instead.

Example Implementation:

// Instead of letting it use the children (which may contain quotes):
<CommandItem>
 User "John Doe"  {/* problematic - quotes in the text */}
</CommandItem>

// Explicitly set the value prop to something without quotes:
const getOptionValue = (x: any) => x.id;

<CommandItem
 key={getOptionValue(o)}
 onSelect={() => handleSelect(o)}
 value={getOptionValue(o)} // use ID or other quote-free value for matching
>
 User "John Doe"  {/* quotes in children won't affect matching now */}
</CommandItem>