gruperly/.agents/skills/react-hook-form/references/integ-shadcn-select-wiring.md

title, impact, impactDescription, tags

title	impact	impactDescription	tags
Wire shadcn Select with onValueChange Instead of Spread	MEDIUM	prevents a Radix Select that renders but never writes to the form	integ, shadcn, select, radix

Wire shadcn Select with onValueChange Instead of Spread

shadcn's Select (built on Radix) uses onValueChange instead of onChange. Spreading field props directly doesn't work. Manually wire the value change handler.

Incorrect (spread doesn't work with Radix Select):

function CountrySelect({ control }: { control: Control }) {
  return (
    <FormField
      control={control}
      name="country"
      render={({ field }) => (
        <Select {...field}>  {/* field.onChange expects event, Radix passes value */}
          <SelectTrigger>
            <SelectValue placeholder="Select country" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="us">United States</SelectItem>
            <SelectItem value="uk">United Kingdom</SelectItem>
          </SelectContent>
        </Select>
      )}
    />
  )
}

Correct (wire props individually):

function CountrySelect({ control }: { control: Control }) {
  return (
    <FormField
      control={control}
      name="country"
      render={({ field }) => (
        <Select
          value={field.value}
          onValueChange={field.onChange}  // Radix passes value directly
          onOpenChange={() => field.onBlur()}  // Trigger blur on close
        >
          <SelectTrigger>
            <SelectValue placeholder="Select country" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="us">United States</SelectItem>
            <SelectItem value="uk">United Kingdom</SelectItem>
          </SelectContent>
        </Select>
      )}
    />
  )
}

Reference: shadcn Select