Formik: Incorrect validation if setFieldTouched is executed immediatly after setFieldValue

[skoging]

🐛 Bug report

Current Behavior

There is an issue with calling setFieldTouched, setTouched, or onBlur immediatly after updating the form values.
Due to using state.values here and here, any state change has to be commited (re-rendered) before a call to setFieldTouched, setTouched, or onBlur, otherwise the previous values will be validated instead.

This looks to be the same issue as #106, and is likely a regression that occured during the v2 hooks rewrite.

Expected behavior

Calling setFieldTouched immediatly after setFieldValue should not result in incorrect validation.

Reproducible example

https://codesandbox.io/s/formik-codesandbox-template-htdsu?file=/index.js

• @material-ui/pickers calls onChange and onAccept synchrounsly when selecting a date. onBlur is only called when the input itself is blurred.
• react-datepicker calls onChange and onSelect synchrounsly when selecting a date. onBlur is only called when the input itself is blurred.

Suggested solution(s)

Additional context

https://github.com/jaredpalmer/formik/issues/2432
https://github.com/jaredpalmer/formik/issues/106

Fix in v1: https://github.com/jaredpalmer/formik/pull/176

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.1.4
| React | 16.13.1
| TypeScript |
| Browser |
| npm/Yarn |
| Operating System |

[mcabs3]

Was trying to track down this issue for hours in my app. Nice find @skoging... hopefully this gets addressed soon.

[bashtan]

I have some trouble in my project. This issue blocks me from using Formik. Waiting for resolve.

[mattsputnikdigital]

I am using setTouched() on blur when a button is clicked, which uses setValue() and I am seeing the same issues as described above.

[syy1125]

Getting the same issue when using formik-material-ui-pickers.
Found a temporary workaround which seems to work so far - setFieldTouched(fieldName, true, false) in the onAccept callback.
The 3rd parameter false makes formik skip validation on that call, so instead it would get the validation result from the earlier setFieldValue call (which, presumably, has the correct values).

[dsgriffin]

Can confirm this, running setFieldTouched immediately after setting the value validates the previous state, running it inside a setTimeout with a 1 second delay works correctly

[kyle-johnson]

Related: https://github.com/formium/formik/issues/2403

[matussovcik]

I am using react-dates with Formik and Yup. I created a work around using react useState() and then setFieldValue() inside useEffect().

CodeSandbox:
https://codesandbox.io/s/cool-booth-gergp?file=/src/index.js