-
-
Notifications
You must be signed in to change notification settings - Fork 2.8k
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鈥檒l occasionally send you account related emails.
Already on GitHub? Sign in to your account
validateOnMount triggers validation with initialValues when re-rendered #2046
Comments
I have a similar problem, |
the problem is this formik/packages/formik/src/Formik.tsx Line 358 in 48dd0c7
you need to but even using this, it is causing rerender |
This only seems to be a problem from version 2.0.4 onwards. Has anyone else found this? |
I've been tearing my hair out over this today before finally figuring out what was going on. I also feel it's quite unintuitive that I ended up working around it by not creating the |
I believe the behavior here should be the same as with |
I am running into this as well. My initialValues are being used instead of the actual Formik field values for validation leading to the form being invalid when it is really valid. Anyone found a solution? |
Hi @arianitu we've created a work around which is to "freeze" initial values so that they never change, thus never trigger this validation effect: function useFreeze(initializer) {
const [frozenValue] = useState(initializer);
return frozenValue;
}
// wherever formik is used: (Not able to be used with `withFormik`)
const {
errors,
touched,
values,
} = useFormik({
initialValues: useFreeze({
question: defaultValues.question || "",
answer: defaultValues.answer || "",
}),
...
}); |
Thank you for your solution @andycarrell , but I don't really want to do that everywhere, this bug is awful, we may downgrade to 1.x. @jaredpalmer this seems like a pretty bad bug in 2.x, shouldn't initialValues just set the values of Formik and then validation should only act on the actual values? All our forms are affected since we want Save buttons etc to be disabled before a user can interact with them. With this bug, it breaks all our forms because we sometimes pass values of inputs up the chain and cause re-renders. |
@andycarrell considering this is from November, I don't think it's going to get fixed soon, so I guess I'll use your solution. This also works:
|
Yep @arianitu this works fine for me. |
Haven't tested it yet, but this looks to me like it would fix the bug: #2243 |
This issue came back again after 2.1.6 |
I am experiencing this issue on 2.2.9. useMemo works but hope this gets fixed.. |
+1 |
This should be fixed in my v3 alpha: #3231 The specific code that fixes it is here, and can be applied to v2 as well: I think there is still some room for improvement but I think the above is suitable for non-concurrent environments. |
Can confirm this is still an issue in the latest version. My initial values is causing my whole form to validate + re-render on mount, despite validateOnMount being set to false. |
馃悰 Bug report
Current Behavior
Re-render causes
validateOnMount
to run again with initialValues, producing incorrect validation results.Video of re-render triggering validation with initialValues
This may be intended behavior, but I found it pretty unexpected, especially since the name of the prop is
validatesOnMount
. The docs do mention that it runs wheninitialValues
changes, so it is behaving as documented. It's a little not-so-obvious though.Expected behavior
validateOnMount
should only run when the component initially mounts.Reproducible example
https://codesandbox.io/s/formik-example-no1kc
Suggested solution(s)
Remove initialValues from the dependencies array for the validateOnMount useEffect.
If the current behavior is desired, perhaps add a more explicit warning about the need to memoize initialValues when using validateOnMount.
Additional context
Your environment
The text was updated successfully, but these errors were encountered: