Improve Zod + RHF Integration for input[type="number"] Coercion

[sgwrangler]

Description

When using input[type="number"] in a form, the DOM sets its value as a string, even though it represents a number. In React Hook Form (RHF), this value is passed as-is to the resolver.

However, when using Zod as the validation schema (via zodResolver), Zod expects a number type for something like z.number(), and it fails validation because it's receiving a string (e.g., "42" instead of 42).

The current workaround is to explicitly use z.coerce.number() instead of z.number(), which tells Zod to coerce the string into a number before validating.

The Zod resolver could optionally auto-coerce number-like strings (from number inputs) when validating against z.number().

[mrlubos]

@JoshuaS98 what would be the ideal output here? Do you want an improved single Zod schema or multiple Zod schemas of the same OpenAPI schema with different validation logic?

[sgwrangler]

@mrlubos we could have an improved single zod schema but it depends. Would it be possible coerce all number types?

age: z.coerce.number(), will accept 5 | "8" but not "John" for example. Or would this have undesired side effects for other use cases?

[mrlubos]

This would be a configuration so as far as side effects go, they'd theoretically affect only you. I'll need to play with it and see how it feels

EDIT: I think we can safely assume this coercion should happen only on payload schemas since responses are presumably in the correct format

[sgwrangler]

@mrlubos that would be great, I will await and hope to see the feature in a future release. Thank you

[mrlubos]

@sgwrangler you can give this a try and see how far you can get! #2933 (comment)