Value that is passed to value prop of Command.Item gets lowercased automatically when passed back to onSelect prop

[joshgalvan]

The value passed to Command.Item should not be changed when given back to onSelect. If the user wants to lowercase the value they will do it.

For example (via Shadcn/ui):

<Command>
  ...
  <CommandGroup>
      <CommandItem
          value="HELLO"        
          onSelect={(newValue) => console.log(newValue)}
      >
          HELLO
      </CommandItem>
  </CommandGroup>
</Command>

This will print hello to the console, which is not expected. The value should always be the same value that is passed to the component.

[joshgalvan]

Wrapping CommandItem in a div fixes this without affecting cmdk's functionality it seems, assuming the value you're passing to value exists elsewhere, like in an array, which it should anyways.

<Command>
  ...
  <CommandGroup>
    {data.map((item) => (
      <div key={item} onClick={() => console.log(item)}>
        <CommandItem value={item}>
          {item}
        </CommandItem>
      </div>
    ))}
  </CommandGroup>
</Command>

[pacocoursey]

You should upgrade to the latest version of cmdk, in which the value is no longer lowercased.