cmdk based components require code to account for value generation

[olsio]

https://ui.shadcn.com/docs/components/combobox

CommandItem has some unexpected behaviours which makes the combobox example work but that is pure luck.

When you do not specify a value property it will use the child text portion and convert it to lower case. The value property is always lower case even when you pass it directly.

const frameworks = [
  {
    value: "next.js",
    label: "Next.js",
  },
  {
    value: "sveltekit",
    label: "SvelteKit",
  },

<CommandItem
  key={framework.value}
  onSelect={(currentValue) => {
    setValue(currentValue === value ? "" : currentValue);
    setOpen(false);
  }}
>
  <Check
    className={cn(
      "mr-2 h-4 w-4",
      value === framework.value ? "opacity-100" : "opacity-0"
    )}
  />
  {framework.label}
</CommandItem>

Changing the input slightly will break the example:

const frameworks = [
  {
    value: "Nextjs",
    label: "Next.js",
  },

To make the example robust and work as expected you would have to pass framework.value as value property for each CommandItem and additionally adapt the matching function to always do a compare on === framework.value.toLowerCase()

[shadcn]

@olsio Thanks for the heads up. I'll check it out. (Happy to accept a PR if you're up for it)

[olsio]

I can look into.

[olsio]

https://github.com/shadcn/ui/pull/334

[ap-1]

pacocoursey's cmdk silently trims values and makes them lowercase. Looks like there's no way to override it. This behavior is unexpected, so I think we would benefit from documenting it on the Command page.

[olsio]

I missed the trim part. Added it to the code and added a warning to the docs.