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:
How can I fix this?
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} />