Formik value does not update after an onBlur function?

[testinggithub1222]

In my case, I need to asynchronously check username and email if it is already existed inside database. If it does, then i will show some message below my input textbox. To achieve that, I have tried to put handleOnBlur inside withFormik but none work :( so i give up on that idea and now I think it might be working by manually create function inside onBlur as below code by manually update touched and errors value onBlur:

const App = ({ values, errors, touched }) => (
      <FormikForm className="register-form  " action="">
           <Form.Group className="register-form-group">
           <Field
              onBlur={e => {
                    touched.username = true;
                    errors.username = "err";
                    console.log(e.target);
                  }}
                name="username"
                type="text"
                placeholder="USERNAME"
                className="form-control rounded register-form-control"
              />
            {touched.username && errors.username && <p>{errors.username}</p>}
            <Field
              name="email"
                type="email"
                placeholder="EMAIL"
                className="form-control rounded register-form-control"
              />                        
      </FormikForm>
)

const FormikApp = withFormik({
  mapPropsToValues({ username, email, password, confirmPassword }) {
    return {
      username: username || "",
      email: email || ""
    };
  },
  validationSchema: Yup.object().shape({
    username: Yup.string()
      .min(6)
      .max(32)
      .required(),
    email: Yup.string()
      .email()
      .required()
  }),
  handleSubmit(values) {
    console.log(values);
  }
})(App);

The problem is that, after moving my current cursor out of username textbox to email, i have checked touched.username and errors.username value using react dev tool but i saw its value is empty. I think it should already update its value by now but seem like something went wrong here. The value is update after my cursor is move out of email only. Please help me.

[CalvinWalzel]

Hey @testinggithub1222,

I had the same problem. I don't have a solution for you, but there is a workaround:

Since the onBlur stops the onChange event, you can delay onBlur by a tick:

<Field
  onBlur={e => {
    setTimeout(() => {
      touched.username = true;
      errors.username = "err";
      console.log(e.target);
    }, 0);
  }}
  name="username"
  type="text"
  placeholder="USERNAME"
  className="form-control rounded register-form-control"
/>

That way the value update should succeed again.

[osvaldokalvaitir]

If the same thing happens to me, is there a solution already?

[smcalilly]

heyo, i'm having the problem too