reactjstypescriptreact-stateshadcnuicmdk

Shadcn/cmdk cannot bind to command input component


I'm trying to compose my own Combobox component using Shadcn ui. In doing this I am using the Command component.

I am trying to bind my command input value to React state in Next.js client component like so:

const [customerQuery, setCustomerQuery] = useState("");

return <CommandInput
     placeholder="johndoe@example.com"
     value={customerQuery}
     onChange={(e: any) => setCustomerQuery(e.target.value)}
     spellCheck={false}
/>

I actually get a type error on the onChange handler:

Type '{ placeholder: string; value: string; onChange: (e: any) => void; spellCheck: false; }' is not assignable to type 'IntrinsicAttributes & Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof InputHTMLAttributes<...>>, "type" | ... 1 more ... | "onChange"> & { ...; } & RefAttributes<...>'.
  Property 'onChange' does not exist on type 'IntrinsicAttributes & Omit<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }, "key" | ... 1 more ... | keyof InputHTMLAttributes<...>>, "type" | ... 1 more ... | "onChange"> & { ...; } & RefAttributes<...>'. ts(2322)

That would be nice to fix. But more of an issue is that when typing in the input field nothing happens, no text appears, nothing. Binding like this works for a regular input however it does not seem to work on cmdk's input. I get no errors in the console. The react dev tools do not show any updates on the computer. I don't see any related issues on cmdk's Github.

If it helps here is what the React devtools show:

React devtools component state

How can I fix this?


Solution

  • The Shadcn Command uses the pacocoursey/cmdk library, and according to their docs it should be:

    https://github.com/pacocoursey/cmdk?tab=readme-ov-file#input-cmdk-input

    const [search, setSearch] = React.useState('')
    
    return <Command.Input value={search} onValueChange={setSearch} />