Manually controlling Select component without register and with setValue and watch

[decipher-cs]

My select component comes from shadcn and it does not have an onChage or onBlur but it does have an onValueChange. I am using setValue and watch as a workaround.

<Select
   value={watch("category")}

   onValueChange={(val) =>
      setValue("category", val, { shouldTouch: true, shouldDirty: true, shouldValidate: true })
   }

   {...register("category")} // won't work
>
   <SelectTrigger>...</SelectTrigger>

   <SelectContent>...</SelectContent>
</Select>

This works well for now but I'm inclined to ask if there are any obvious problems with this method.

[bae080311]

because Select component is customed if you want to use register how about using NativeSelect?

https://ui.shadcn.com/docs/components/native-select

[decipher-cs]

Native select is unstyled so it defeats the purpose of using shadcn. What do you think about my current strategy? As far as I can tell it's pretty safe.

[bae080311]

shadcn Select is a custom component, so register isn’t really compatible anyway. Using watch + setValue is a common workaround and generally safe. I don’t see any obvious issues with extra renders or side effects either. If I wanted the most “correct” RHF integration I’d use Controller, but I’m fine sticking with this for now.

[BrendanC23]

How about using <Controller /> instead? It looks like the new Select docs don't have an example of a select with a form, but you can get an idea from the legacy docs. Here, <FormField /> uses a Controller internally.

<FormField
  control={form.control}
  name="email"
  render={({ field }) => (
    <FormItem>
        <FormLabel>Email</FormLabel>
        <Select onValueChange={field.onChange} defaultValue={field.value}>
            <FormControl>
                <SelectTrigger>
                    <SelectValue placeholder="Select a verified email to display" />
                </SelectTrigger>
            </FormControl>
            <SelectContent>
                <SelectItem value="m@example.com">m@example.com</SelectItem>
                <SelectItem value="m@google.com">m@google.com</SelectItem>
                <SelectItem value="m@support.com">m@support.com</SelectItem>
            </SelectContent>
        </Select>
        <FormDescription>
        You can manage email addresses in your{" "}
            <Link href="/examples/forms">email settings</Link>.
        </FormDescription>
        <FormMessage />
    </FormItem>
  )}
/>

The new Shadcn form docs don't provide an example with <Select /> but show how to integrate a <Controller /> into a form.

<Controller
    name="title"
    control={form.control}
    render={({ field, fieldState }) => (
        <Field data-invalid="{fieldState.invalid}">
            <FieldLabel htmlFor="form-rhf-demo-title"> Bug Title </FieldLabel>
            <input
                {...field}
                id="form-rhf-demo-title"
                aria-invalid="{fieldState.invalid}"
                placeholder="Login button not working on mobile"
                autocomplete="off"
            />
            {fieldState.invalid && <FieldError errors="{[fieldState.error]}" />}
        </Field>
    )}
/>;

[decipher-cs]

This seems like the correct approach but if there isn't anything outright wrong with my current implementation then I'd rather stick with it. From what I can tell, there aren't any extra renders or weird side-effects. Nothing out of ordinary from what I can tell.

[BrendanC23]

It seems like it works, but it doesn't seem ideal. Here are some potential pitfalls. If you think they're minor enough or don't apply to your use-case, I think it's fine to use your code.

1. watch() triggers re-renders at the root level (the component that calls useForm()). This can be fixed by calling useWatch() instead
2. This approach requires you to handle management and display of field errors yourself
3. You lose access to some parts of the register() API, like
4. You're not providing a ref to react-hook-form, so it can't handle focusing errors for you
5. You don't get automatic onChange()/onBlur()/trigger() calls
6. You lose access to the additional functionality provided by the register API
   • maxLength, minLength
   • valueAsNumber, setValueAs
   • disabled

[decipher-cs]

I was avoiding the <Controller/> component because it had a lot of properties that I wasn't sure where to put but I ended up using the component anyway.

Does this look right to you? I keep on getting Select is changing from uncontrolled to controlled. in the console.

<Controller
   control={control}
   name="categoryName"
   rules={{ required: true }}
   render={({ field }) => (
      <Field data-invalid={!!errors.categoryName}>
         <FieldLabel htmlFor="categoryName">Category</FieldLabel>

         <Select onValueChange={field.onChange} {...field} aria-invalid={!!errors.categoryName}>
            <SelectTrigger>
               <SelectValue placeholder="Choose Product Category" />
            </SelectTrigger>

            <SelectContent>
               {categories.map(([, name]) => (
                  <SelectItem value={name} id={name} key={name}>
                     {name}
                  </SelectItem>
               ))}
            </SelectContent>
         </Select>

         <FieldError>{errors.categoryName?.message}</FieldError>
      </Field>
   )}
/>

[BrendanC23]

That looks correct. The "Select is changing from uncontrolled to controlled." error is because the value is changing from undefined to a string. React treats undefined as a controlled component. Anything else means that the component is controlled. You can provide default values when like useForm({ defaultValues: { categoryName: "" } }) to fix it.