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

Own Field-level Validation: formik.onChange handler is not in sync with the formik.values.confirmPassword #3374

Open
handhikadj opened this issue Oct 13, 2021 · 7 comments

Comments

@handhikadj
Copy link

handhikadj commented Oct 13, 2021

Bug report

Current Behavior

I came up with something that can handle field level validation but I notice the confirm password always fails because the formik.values.confirmPassword value is not "in sync" with its current value on the console
And I think it's related to #3368 and #1737

onChange={(e) => {
  formik.handleChange(e);
  formik.validateField("confirmPassword");
  console.log(formik.values.confirmPassword);
}}

Expected behavior

the validation runs fine

Reproducible example

https://codesandbox.io/s/pedantic-cloud-skr3r

  1. type password
  2. type confirm password

you will see the validation fails and the value on console is not in sync

Suggested solution(s)

Additional context

Your environment

Software Version(s)
Formik 2.2.9
React latest
TypeScript -
Browser Chrome
npm/Yarn 6.14.13
Operating System Mac M1
@johnrom
Copy link
Collaborator

johnrom commented Oct 13, 2021

@handhikadj
Copy link
Author

noticed that there's this dependency: https://www.npmjs.com/package/@johnrom/formik-v3
I think we can say it's not officially fixed (at least yet)

@johnrom
Copy link
Collaborator

johnrom commented Oct 14, 2021

yes, the PR is still open

@JulianKingman
Copy link

@johnrom could you say roughly what the fix is? I'm happy to make a PR to v2 with a fix, but having a starting point or a commit to look at would make it a lot easier.

@johnrom
Copy link
Collaborator

johnrom commented Jan 12, 2022

The fix is my PR called Formik v3 Umbrella PR. The issue is that there is no way to retrieve the final state in v2 without waiting for the reducer to process messages and trigger an effect. In my v3 PR, I added a redux-like getState API which can be used to get the latest value immediately after an update.

@JulianKingman
Copy link

JulianKingman commented Jan 14, 2022

OK, I figured out what was going wrong. I'm not sure I'll make PR, but at least I can help others with this problem work around the issue. Maybe a PR to the docs about switching from 1x to 2x would do the trick.

The issue is that if you use setFieldValue as a substitute for onChange from v1, like this:

// initialValues = {A: undefined, B: 2, C: 3}
setFieldValue('A', 1);
setFieldValue('B', 2);
setFieldValue('C', 3);

It's setting the fields values asynchronously, but validating synchronously, so when setFieldValue('B', 2) runs, A is still undefined, but validation runs on it, and thus you get a corresponding error that A is undefined. Instead, I fixed it by doing this instead:

setValues({
  ...values,
  A: 1,
  B: 2,
  C: 3,
})

@JulianKingman
Copy link

JulianKingman commented Jan 20, 2022

I added a PR to the docs: #3464

It addresses this:
#3345
And relates to this:
#2083

I'm right that setFieldValue is and is intended to be asynchronous with regards to the form values, right? Perhaps I should add a sentence about that to the docs for setFieldValue?

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

No branches or pull requests

3 participants