Select component doesn't infer type in onValueChange

[bennik88]

Problem

I'm trying to use a controlled form with a Select component but I'm getting a Typescript error on the onValueChange(field.onChange)

Error

Types of parameters 'event' and 'value' are incompatible.
    Type 'string' is not assignable to type '"Intermediate" | "Native" | ChangeEvent<Element>'.ts(2322)
index.d.ts(14, 5): The expected type comes from property 'onValueChange' which is declared here on type 'IntrinsicAttributes & SelectProps'

What I've tried

I can fix it with something like that (e: Proficiency) => field.onChange(e) but I want to avoid hard typing it like that. Why is it not infering the type?

Code

// Constants
const proficiency = ["Intermediate", "Native"]

// The controlled form
 <FormField
    control={form.control}
    name="proficiency"
    render={({ field }) => (
      <FormItem>
        <FormLabel>Language Proficiency</FormLabel>
        <Select
          onValueChange={field.onChange}  
          defaultValue={field.value}
        >
          <FormControl>
            <SelectTrigger>
              <SelectValue placeholder="Please select" />
            </SelectTrigger>
          </FormControl>
          <SelectContent>
            {proficiency.map((proficiency) => (
              <SelectItem
                key={proficiency}
                value={proficiency}
              >
                {proficiency}
              </SelectItem>
...

// The Validator
ja_proficiency: z.enum(["Intermediate", "Native"]),

Solution I'm looking for

I want the types to automatically infer on the onChange handler with the select options and zod in combination with useForm().

[t0rbik]

You can do something like

interface SmartSelectProps<T extends string>
  extends SelectPrimitive.SelectProps {
  value: T | undefined;
  onValueChange: (value: T) => void;
}

const Select = <T extends string>({ value, ...props }: SmartSelectProps<T>) => (
  <SelectPrimitive.Select {...props} />
);```