Validation not working properly with setFieldError inside onBlur in 2.2.9

[slutske22]

Bug report

Current Behavior

When trying to set an error manually using formikProps.setFieldError, from within the blur handler of a form input, validation is not ocurring as expected. Take this simple example:

<TextField
  error={formikProps.errors.name}
  helperText={formikProps.touched.name ? formikProps.errors.name : ""}
  name={"name"}
  onChange={formikProps.handleChange}
  onBlur={(e) => {
    if (existingNames.includes(e.target.value)) {
      formikProps.setFieldError("name", "Another template already has this name");
    }
    formikProps.handleBlur(e);
  }}
  value={formikProps.values.name}
 />

In this example, I would expect that when the field blurs, if existingNames includes the value of input, the error should be created and show an error message. Note that this does indeed work in v2.2.6, as can be seen in this codesandbox. However, this is not working in 2.2.9

Expected behavior

I would expect that when you manually setFieldError inside a blur handler, that error should register with Formik

Reproducible example

Example of how this is broken in 2.2.9

Example if how it should work, as in 2.2.6

In either example, type in one of the existing names in the list of existingNames, 'name1' or 'name2'.

Suggested solution(s)

Frankly I'm not sure how to fix this, but it seems to be related to #3199. I've tried every variation of validateOnMount, validateOnBlur, and validateOnChange, nothing seems to help.

Your environment

Software	Version(s)
Formik	2.2.9
React	^17
TypeScript	^4
Browser	. Chrome ^91
npm/Yarn	. ^6
Operating System	. OSX

[muriloalvespereira]

Hello @slutske22 , that's the only solution I founded:

``
import { Formik } from "formik";
import * as Yup from "yup";
import { TextField, Typography } from "@material-ui/core";
import "./styles.css";
import { useState } from "react";

const initialValues = {
name: ""
};

const validationSchema = Yup.object().shape({
name: Yup.string().required("You must enter a name")
});

export default function App() {
const existingNames = ["name1", "name2"];
const [customError, setCustomError] = useState(false);

return (

{(formikProps) => (
<>
Name
<TextField
error={formikProps.errors.name}
fullWidth
helperText={
formikProps.touched.name ? formikProps.errors.name : ""
}
name={"name"}
onChange={formikProps.handleChange}
onBlur={(e) => {
if (
existingNames.includes(e.target.value) &&
formikProps.values.nameref !== e.target.value
) {
setCustomError(true);
// formikProps.setFieldError(
// "name",
// "Another template already has this name"
// );
}
formikProps.handleBlur(e);
}}
value={formikProps.values.name}
/>
{customError && (
<div style={{ color: "red", fontSize: "10px" }}>
Another template already has this name

)}
</>
)}


);
}``

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 60 days

[kelly-tock]

I am seeing this after an upgrade from 2.2.6 to 2.2.9 as well, my guess is its the PR in 2.2.7 as 8 and 9 are types and lodash upgrades.

[vdhpieter]

Also having the same issue but not using setFieldError only setFieldValue & setFieldTouched. It's indeed related to #3201.

When I log all the errors I think this conditional was actually hiding another bug. What I see happening:

1. Change an input field from invalid to valid state
2. the errors get dispatched:
   • state.errors = { field: "error message" }
   • combinedErrors = { }
3. after that the code is executed again with:
   • state.errors = { field: "error message" }
   • combinedErrors = { field: "error message" }

Which seems outdated info. But because both are the same it wasn't dispatched in version 2.6. The actual bug seems to be that runAllValidations is ran with old data after it was ran with the correct data.

@artola @jaredpalmer would this be enough info (together with the reproduction in the issue description) ? Anything else I can do to get this issue fixed?

[mayur-2345]

facing same issue