Skip to content

issue: handleSubmit doesn't respect Zod schema transformations in TypeScript #1078

Open
@gerkim62

Description

@gerkim62

Version Number

7.52.0

Codesandbox/Expo snack

https://codesandbox.io/p/devbox/runtime-star-dkcpzz

Steps to reproduce

When using react-hook-form with a Zod schema that includes transformations, the handleSubmit function is passing data to the onSubmit function typed as z.input instead of the expected z.output. This causes TypeScript errors when trying to access the transformed properties in the submit handler.

To reproduce:

Define a Zod schema with a transformation:

typescriptCopyimport { z } from "zod";

const EmailOrPhoneSchema = z.object({
emailOrPhone: z.string().trim().refine(/* ... /)
})
.transform(({ emailOrPhone }) => ({
isEmail: /
... /,
isPhone: /
... /,
value: /
... */
}));

Use the schema with react-hook-form:

typescriptCopyconst { handleSubmit } = useForm<z.input>({
resolver: zodResolver(EmailOrPhoneSchema),
});

function onSubmit(data: z.output) {
console.log(data); // TypeScript error: Property 'isEmail' does not exist on type '{ emailOrPhone: string; }'
}

// ...

{/* ... */}

Expected behaviour

The onSubmit function should receive data typed as z.output, reflecting the transformation defined in the Zod schema.

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions