Next.js Discord

Discord Forum

shadcn select doesn't work

Unanswered
Havana posted this in #help-forum
Open in Discord
HavanaOP
My form field using shadcn elements:

                        <FormField
                            control={form.control}
                            name="clientId"
                            render={({ field }) => (
                                <FormItem>
                                    <FormLabel>Client</FormLabel>
                                    <Select name='selectClient' onValueChange={(value) => {
                                        field.onChange(value)
                                        handleClientChange(value)
                                    }}>
                                        <FormControl>
                                            <SelectTrigger>
                                                <SelectValue placeholder="Select client">
                                                    {`${selectedClient?.client_forename} ${selectedClient?.client_surname}`}
                                                </SelectValue>
                                            </SelectTrigger>
                                        </FormControl>
                                        <SelectContent>
                                            <SelectGroup>
                                                <SelectLabel>Client</SelectLabel>
                                                {clients?.map((client: any) => (
                                                    <SelectItem key={client.client_id} value={client.client_id}>
                                                        {`${client.client_forename} ${client.client_surname}`}
                                                    </SelectItem>
                                                ))}
                                            </SelectGroup>
                                        </SelectContent>
                                    </Select>
                                </FormItem>
                            )}
                        />

2 Replies

HavanaOP
The issue is the above doesn't work, it just sets my state back to null everytime i select an option
My form field handler code looks like:

    const [selectedClient, setSelectedClient] = useState<any>(null);

    const handleClientChange = (clientId: string) => {
        const client = clients.find((client: any) => client.client_id === clientId);
        console.log(client.client_id)
        setSelectedClient(client.client_id);
    };