handleSubmit types incorrect

[enchorb]

Version Number

7.45.1

Codesandbox/Expo snack

N/A

Steps to reproduce

handleSubmit types used to work on 7.44.3 but after updating to 7.45.1 is now undefined leading to a type error.

For the following below example config the data property in handleSubmit used to be { password: string} but now is undefined extends FieldValues ? SubmitHandler<undefined> : SubmitHandler<{password: string}> which leads to a type error 'data' is possibly 'undefined'.

const {
    control,
    handleSubmit,
    reset,
    trigger,
    formState: { isValid, isSubmitting, touchedFields }
  } = useForm<{
    password: string;
  }>({
    mode: 'onBlur',
    resolver: zodResolver(z.object({
       password: z.string()
    }))
  });

Maybe related? https://github.com/react-hook-form/react-hook-form/releases/tag/v7.44.0-next.0

Expected behaviour

Correct types

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[saevarb]

I can't speak to whether this is an actual bug, but one thing that has(as far as I know) always been an issue when using something like zod with RHF is that, by default, you end up with some types that don't match, either in defaultValues, or in handleSubmit, because it's not correctly inferring the types based on the zod schema. I.e. you might have a schema with a field that coerces a string to a number(or string to a date, or what have you), which means you want to give e.g. defaultValues strings, but handleSubmit should see the output type(number or date, for example).

Thankfully useForm allows you to set the type parameters correctly(it just doesn't do it by default). I wrote this wrapper:

export function useZodForm<Schema extends z.ZodTypeAny, Context = unknown>(
  props: Exclude<UseFormProps<z.input<Schema>, Context>, "resolver"> & {
    schema: Schema;
  }
): UseFormReturn<z.input<Schema>, Context, z.infer<Schema>> {
  return useForm<z.input<Schema>, Context, z.infer<Schema>>({
    ...props,
    resolver: zodResolver(props.schema),
  });
}

Usage example:

const MySchema = z.object({
  numberField: z.string().pipe(z.coerce.number()),
});
export function Foo() {
  const { handleSubmit } = useZodForm({
    schema: MySchema,
    defaultValues: {
      // This is correctly typed as a string
      numberField: "0",
    },
  });
  return (
    <form
      onSubmit={handleSubmit((data) => {
        // this is correctly typed as a number
        console.log("submitted", data.numberField);
      })}
    ></form>
  );
}

[enchorb]

This works great and reduces so much boilerplate I had for all my Zod forms, thanks!

[tutti51]

I also encountered the same issue in my environment. In my case, the problem persists even in version 7.44.3, while it doesn't occur in version 7.43.9. It appears that the changes in the definition of useFormHandleSubmit are likely to be affecting it.

In 7.44.3:

export type UseFormHandleSubmit<TFieldValues extends FieldValues, TTransformedValues extends FieldValues | undefined = undefined> = (onValid: TTransformedValues extends FieldValues ? SubmitHandler<TTransformedValues> : SubmitHandler<TFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React.BaseSyntheticEvent) => Promise<void>;

In 7.43.9:

export type UseFormHandleSubmit<TFieldValues extends FieldValues> = (onValid: SubmitHandler<TFieldValues>, onInvalid?: SubmitErrorHandler<TFieldValues>) => (e?: React.BaseSyntheticEvent) => Promise<void>;

[mayerlench]

Oh man, this update just broke my app. This is a breaking change for a minor version update

Cant pass my form around to other components

[het0]

Same issue appeared for me after minor version upgrade to 7.45.1 breaking my build process. Using yup resolver.

[jimmy-guzman]

Also using yup resolver but we're seeing this regardless of wether or not a resolver exists. For us undefined happens when strictNullChecks is false, here's a modified sandbox from the docs

[peetzweg]

Weird, that fixed it for me.

[jrojas-qventus]

I'm very sorry for reviving this conversation but I'm having the same issue after I went from 7.41.0 to 7.48.2 when I upgrade I get a
"data is possibly 'undefined'. TS18048 on my handleSubmit

My typescript version is 4.9.4