Formik: Changes made to Formik 2.2.1 causing validation to briefly show error onBlur even though no error exists

[kbi-daniel]

🐛 Bug report

Current Behavior

My form is set to validate onBlur. After first field is blurred, the form is validated and all fields are marked with appropriate errors, but remain untouched (so no error is displayed in UI). However, when updating any subsequent fields, those fields have their touched property set to true, which takes place before field is validated and error can be removed. Within milliseconds, validation is run and error is removed.

Effect is to make error message flicker in field. This never happened before updates made to 2.2.1.

Expected behavior

During onBlur event, Touched should not be set to true until after validation has occurred.

Suggested solution(s)

Revert or refine whatever changes were made in version 2.2.1

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 2.2.1 |
| React | 16.14.0 |
| TypeScript | N/A |
| Browser | Chrome (latest) |
| npm/Yarn | 6.14.8 |
| Operating System | Windows 10 Pro |

[johnrom]

I'd guess https://github.com/formium/formik/pull/2820 is the source. Basically, there is a render between when validation are scheduled + touched is set to true, and validations are completed. This might be mitigated by setting validateOnChange={true} so that validations can run before the blur callback, but that obviously has other implications.

Validation + Touched should remain in sync, so if we're going to schedule the validations, we should probably schedule setTouched as well.

[wysher]

@johnrom probably this is related, because behaviour I will describe changed with [email protected]

I have editable Field, which I need to validate before save (change to not editable). For this I use helpers.setTouched(tochedFieldsObj, true), wich returns field errors object asynchronously.

Now it returns object which looks like debugging values for me:

PS. Setting validateOnChange={true} doesn't help.

[jaredpalmer]

Yeah this is clearly a regression with validateFormWithLowPriority

[kbi-daniel]

Hey everyone, thanks for working on a fix for this issue. Unfortunately, I just upgraded to version 2.2.2 and still seem to be having the same issues with validation briefly appearing onBlur.

The issue does not exist if I downgrade to version 2.2.0.

[umidbekkarimov]

Hey everyone, thanks for working on a fix for this issue. Unfortunately, I just upgraded to version 2.2.2 and still seem to be having the same issues with validation briefly appearing onBlur.

The issue does not exist if I downgrade to version 2.2.0.

hey, I had follow up PR, it should be released soon, but until then can you provide minimal codesandbox repro? Its hard to reproduce race conditions with scheduler without mocking it in jest

[kbi-daniel]

@umidbekkarimov Hopefully this helps:
https://codesandbox.io/s/crazy-hamilton-3qosr?fontsize=14&hidenavigation=1&theme=dark

[umidbekkarimov]

@kbi-daniel thanks for repro, bug fixed in #2865.
I add #2875 with the Cypress test because Jest test didn't reproduce that bug.

[kbi-daniel]

@umidbekkarimov it's very strange, I implemented version 2.2.3 on the Code Sandbox and everything looks to be working fine there. However, when I implemented version 2.2.3 on my actual React App, I'm stilling running into the same validation issue.

Of course, in my actual React App, I'm dealing with a much larger form with more comprehensive validation.

[kbi-daniel]

@umidbekkarimov figured out the difference between the Code Sandbox and my React app. Looks like in my React app the Formik prop validateOnChange was set to false; while that prop was not set in the previous Code Sandbox and therefore defaulted to true.

I updated the Code Sandbox with validateOnChange to false, now even with Formik version 2.2.3 theres a flash of validation onBlur. https://codesandbox.io/s/crazy-hamilton-3qosr?fontsize=14&hidenavigation=1&theme=dark&file=/src/App.js:250-273

[umidbekkarimov]

@kbi-daniel thanks for another repro, I could reproduce that case in cypress tests. I was thinking about the better implementation of the low priority validation, maybe it's the only way to fix it.

[kbi-daniel]

@umidbekkarimov everything seems to be working well with version 2.2.4. Thanks for all your help!

[gmanriqueUY-ad]

Hey! I'm experiencing a related issue when validating on change and using setFieldTouched on change as well. I've updated a CodeSandbox from one of the previous comments to reproduce: https://codesandbox.io/s/white-surf-x9izf?file=/src/App.js. Just type one character on any of the fields and you'll briefly see the error message.

I also confirmed it's not reproducible on 2.2.0.

Let me know if you prefer that I create a separate issue.

Thanks in advance!