Replies: 1 comment
-
Ok, I sort of understand what is going on... copying my self-answer from stack-overflow: The hint came from the docs for formState, where it is stated that formState is a Proxy and that care should be taken with destructuring etc. In my actual app, I call useForm in a wrapper component:
I noticed that when logging the errors in FormWrapper, errors where logged on every blur event (expected, as the mode is onBlur). But if I log the errors in ActualForm, no re-render and logging happens following blur events.So the errors object doesn't trigger a re-render when it changes, but the larger formState object does. So the solution is to destructure the errors in ActualForm, and to pass formState as a prop to ActualForm:
This solves the problem. Can't say I understand the proxy behavior though... |
Beta Was this translation helpful? Give feedback.
-
I have a form managed by react-hook-form, and want the validation to be triggered onBlur. The validation rules are defined with a Zod schema.
The problem is that the validation for some reason is not being triggered by the first blurring event (or maybe it is, but no re-render follows and the error is not visible), but only after a succession of blur and then changing the value of the input.
For example, I have an email field that can have as a valid value only a valid email string or an empty string. If I insert an invalid email string (say 'someone@') and then blur - no error is visible, and the error is undefined. If I then change the value (add/delete a character) then the error is applied correctly and as expected by the Zod rules.
I am unable to reproduce the bug in a sandbox, even when adding complexities such as a tooltip that measures the input field to check for overflowing, so it must be due to some more remote interaction that I am missing.
But maybe someone can have an idea where this sort of bug can come from based on my description of the error behavior and the code below, or suggest a way to bypass it:
An input, in a simplified version, looks something like this:
The console.log('blur!', 'error', error) is being executed, and the error is undefined even when it should be defined. The error only gets visible after a subsequent change.
If I try to bypass the bug like so:
It doesn't help - even when isValid is false and setError is supposed to be called - the error is not being updated until after a further change of the input (in which case the error message is, as expected, 'something'). Or maybe, trigger() and setError() are not supposed to cause a re-render?
Any Idea what might be causing this behavior?
Beta Was this translation helpful? Give feedback.
All reactions