Select with form is not auto focusing

[Icestonks]

Am I the only one expiring that, the select is not being focused when there is an error?

[JibranMachiavelli]

You're not the only one. The cause is that field.ref never reaches a focusable element.

With shouldFocusError (on by default), react-hook-form focuses the first invalid field by calling .focus() on the ref it got from field.ref. For an <Input {...field} /> that ref lands on the <input>. In the Select example, though, field is only used for value / onValueChange, so RHF holds no element to focus, and the Select is skipped.

Pass the ref to the trigger, which is the focusable button:

<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
      <FormLabel>Email</FormLabel>
      <Select onValueChange={field.onChange} defaultValue={field.value}>
        <FormControl>
          <SelectTrigger ref={field.ref}>
            <SelectValue placeholder="Select a verified email" />
          </SelectTrigger>
        </FormControl>
        <SelectContent>{/* ... */}</SelectContent>
      </Select>
      <FormMessage />
    </FormItem>
  )}
/>

The same applies to any non-native control (Combobox, DatePicker, RadioGroup…): give field.ref to whatever element should receive focus. form.setFocus('email') will then work too.