Prevent validation errors (where mode = onBlur) when form was only touched by a setFocus()

[unleashit]

Hi, I have some uncontrolled forms that have client side validation using Zod schemas. There's also a useEffect to setFocus() on the first input when the form renders. It's all working fine, but if the user clicks anywhere outside the form or tries to navigate to a new page, etc. before they begin typing, it triggers the non empty error for the focused field. I would basically like the error to only be triggered only if the field is both dirty and has been touched by the "user" (not just by setFocus()).

I'm wondering if there is a simple solution within the API that avoids having to manually wire up custom onBlur handlers or having to resort to onSubmit mode. I did find a Github issue about this same problem, but it didn't have a solution and now I can't find it again for some reason.

For reference, here's an example schema:

const schema = z.object({
  email: z
    .string()
    .nonempty({ message: 'Please enter your email' })
    .email({ message: 'Please enter a valid email' })
    .max(50, { message: 'Email is too long' })
    .default(''),
  password: z
    .string()
    .nonempty({ message: 'Please enter a password' })
    .min(8)
    .max(56)
    .default(''),
});

Here's an example: https://npm-library-demo.vercel.app/login

[unleashit]

Anyone know an uncomplicated solution? If it's not clear what the problem is, click on the link above then once the page is loaded do either of the following:

1. click anywhere in the browser window. The validation for the focused field will be triggered.
2. click any link, either in the sidebar or in the component. The validation will be triggered for the focused field and sometimes the link will have to be clicked a second time before the browser navigates.

Is there a way to specify that fields focused with setFocus() default as untouched? Or is the only solution to have to imperatively write custom onBlur handlers that check if the field has been focused and if so manually trigger a validation only if the value doesn't match the default value?

[Toshinaki]

@unleashit
Hi, did you find any solution?
I have a similar problem where I set autofocus to an input field, and it get focused when page rendered. When click away, the check is triggered.