Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
1 task done
gerkim62 opened this issue Jun 25, 2024 · 4 comments
Open
1 task done

Comments

@gerkim62
Copy link

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
@ryanelian
Copy link

useForm<Input, unknown, Output> to accomplish this.

@gerkim62
Copy link
Author

useForm<Input, unknown, Output> to accomplish this.

i couldn't find any docs on this, do you mind sharing a link on the docs about the generics to pass into the useForm please

@ryanelian
Copy link

there's no documentation for now, only an issue about this:

react-hook-form/react-hook-form#9600

@gerkim62
Copy link
Author

I guess this issue should remain open untill docs have been updated, or this issue be closed and a new one opened about the absense of docs for those who might face this same issue in future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants