TypeError building custom input, Type 'Control<FormValues, any>' is not assignable to type 'Control<FieldValues, any>'.

[meotimdihia]

I am getting this error with React 18, Typescript 4.7.4
It takes 4 hours for me, but I can't solve it.

<Input name="test" control={control} />

Type 'Control<FormValues, any>' is not assignable to type 'Control<FieldValues, any>'.
  The types of '_subjects.state' are incompatible between these types.
    Type 'FormStateSubjectRef<FormValues>' is not assignable to type 'FormStateSubjectRef<FieldValues>'.
      Type 'FormStateSubjectRef<FormValues>' is not assignable to type '{ readonly observers: Observer<Partial<FormState<FieldValues>> & { name?: string | undefined; }>[]; subscribe: (value: Observer<Partial<FormState<FieldValues>> & { ...; }>) => Subscription; unsubscribe: Noop; }'.
        Types of property 'subscribe' are incompatible.
          Type '(value: Observer<Partial<FormState<FormValues>> & { name?: string | undefined; }>) => Subscription' is not assignable to type '(value: Observer<Partial<FormState<FieldValues>> & { name?: string | undefined; }>) => Subscription'.
            Types of parameters 'value' and 'value' are incompatible.
              Type 'Observer<Partial<FormState<FieldValues>> & { name?: string | undefined; }>' is not assignable to type 'Observer<Partial<FormState<FormValues>> & { name?: string | undefined; }>'.
                Type 'Partial<FormState<FormValues>> & { name?: string | undefined; }' is not assignable to type 'Partial<FormState<FieldValues>> & { name?: string | undefined; }'.
                  Type 'Partial<FormState<FormValues>> & { name?: string | undefined; }' is not assignable to type 'Partial<FormState<FieldValues>>'.
                    Types of property 'errors' are incompatible.
                      Type 'FieldErrorsImpl<DeepRequired<FormValues>> | undefined' is not assignable to type 'FieldErrorsImpl<DeepRequired<FieldValues>> | undefined'.
                        Type 'FieldErrorsImpl<DeepRequired<FormValues>>' is not assignable to type 'FieldErrorsImpl<DeepRequired<FieldValues>>'.
                          Property 'test' is incompatible with index signature.
                            Type 'FieldError' is not assignable to type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>'.
                              Property 'type' is incompatible with index signature.
                                Type 'LiteralUnion<"pattern" | "valueAsNumber" | "valueAsDate" | "setValueAs" | "disabled" | "required" | "min" | "max" | "maxLength" | "minLength" | "validate" | "value" | "shouldUnregister" | "onChange" | "onBlur" | "deps", string>' is not assignable to type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined'.
                                  Type '"pattern"' is not assignable to type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined'.(2322)
controller.d.ts(28, 5): The expected type comes from property 'control' which is declared here on type 'IntrinsicAttributes & Pick<InputProps, "control" | "form" | "slot" | "style" | "title" | "pattern" | "name" | "rules" | "disabled" | "required" | ... 280 more ... | "onTransitionEndCapture"> & RefAttributes<...>'

the code

https://stackblitz.com/edit/next-typescript-pokptk-wuiput?file=pages%2Findex.tsx

[Moshyfawn]

Check out this thread #8606

[Moshyfawn]

You need to pass down the generic form types into UseControllerProps type is the TLDR; of it

[meotimdihia]

@Moshyfawn thanks, but the example doesn't use React forward.

[Moshyfawn]

@Moshyfawn thanks, but the example doesn't use React forward.

Same concept, you just need to apply it to the forwardRef API. Here's an example:

import type {
  UseControllerProps,
  FieldValues,
  FieldPath,
} from 'react-hook-form'

type InputProps<
  TFieldValues extends FieldValues,
  TName extends FieldPath<TFieldValues>
> = UseControllerProps<TFieldValues, TName>

const Input = React.forwardRef(
  <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>(
    props: InputProps<TFieldValues, TName>,
    ref: Ref<HTMLInputElement>
  ) => //== Component Logic Here ==//
);

P.S. I don't get why you need React.forwardRef and a custom propRef at the same time

[meotimdihia]

Thanks for the help but the code doesn't work.
I tried it and still get the error:

Type 'Control<FormValues, any>' is not assignable to type 'Control<FieldValues, any>'.
  The types of '_options.resolver' are incompatible between these types.
    Type 'Resolver<FormValues, any>' is not assignable to type 'Resolver<FieldValues, any>'.

I added the code as input2:

<Input2 name="test" control={control} />

https://stackblitz.com/edit/next-typescript-pokptk-wuiput?file=pages%2Finput2.tsx,pages%2Findex.tsx

[keemor]

What do you think about such typing? #4965 (comment)

[VagnerSilva]

The solution proposed in the suggested link did not resolve the issue when I use the property
'defaultValue'

Then solve as follows

export type InputProps<TFieldValues extends FieldValues = FieldValues> = {
  name: NAME
  type: INPUT_TYPE
  className?: CLASS_NAME
} & InputHTMLAttributes<HTMLInputElement> &
  UseControllerProps<TFieldValues>


export const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className = '', control, name, type, ...inputProps }, ref) => {
    return ( ....)
  }) as <T extends FieldValues>(props: InputProps<T>) => React.ReactElement


// without forwardRef

export const Input =( ({ className = '', control, name, type, ...inputProps }: InputProps)
=> {
  return ( ... )
}) as <T extends FieldValues>(props: InputProps<T>) => React.ReactElement

 <Input<MyFormType> control={control} name="username" type="text" />

// without forwardRef

<Input control={control} name="username" type="text" />