onBlur validation cancels out onSubmit

[ghost]

Summary

When onChange={handleChange} is used in conjunction with onBlur={handleBlur}, the onSubmit={handleSubmit} event is not triggered until the second attempt. After some digging, I believe this is because the setState(...) calls in handleBlur are canceling out the onClick or onSubmit events. Having fiddled around with the internals, I've noted that without the setState(...) inside of handleBlur, this does not happen.

Current Behavior

I'm using the following code:

const SignUpForm = ({ onSubmit }) => (
  <Formik
    initialValues={{
      email: "",
      password: ""
    }}
    validationSchema={Yup.object().shape({
      email: emailValidator,
      password: passwordValidator
    })}
    onSubmit={onSubmit}
    render={({
      values,
      errors,
      touched,
      handleChange,
      handleBlur,
      handleSubmit,
      isValid,
      isSubmitting
    }) => {
      const emailError = touched.email && errors.email;
      const passwordError = touched.password && errors.password;

      return (
        <SignUpFormInternal
          isValid={isValid}
          email={values.email}
          emailHelperText={emailError && errors.email}
          emailError={Boolean(emailError)}
          onEmailChange={handleChange("email")}
          onEmailBlur={handleBlur("email")}
          password={values.password}
          passwordHelperText={passwordError && errors.password}
          passwordError={Boolean(passwordError)}
          onPasswordChange={handleChange("password")}
          onPasswordBlur={handleBlur("password")}
          onSubmit={handleSubmit}
          isSubmitting={isSubmitting}
        />
      );
    }}
  />
);

Steps to Reproduce

• Create a form with a single text field and a submit button
• Apply onBlur={handleBlur}, onChange={handleChange}, and onSubmit={handleSubmit}
• Enter a value into the text field and click the submit button
• At this point, the onSubmit callback will not have been fired
• Click the submit button once again
• At this point, the onSubmit callback will have been fired

Expected behavior

My expectation is that, with the provided configuration, the onSubmit callback would be fired the first time around.

Suggested solution(s)

I have had luck in resolving this issue by doing the following within handleBlur:

setTimeout(() => {
  this.setState(prevState => ({
    touched: setIn(prevState.touched, field, true),
  }));

  if (this.props.validateOnBlur) {
    this.runValidations(this.state.values);
  }
}, 0);

Effectively, this forces the state change side-effects from handleBlur to be pushed back onto the event queue, thus allowing it to be prioritized behind handleSubmit. This definitely seems like a sketchy way to solve this problem, however.

Additional context

CodeSandbox Link:

---

• Formik Version:
• React Version: 16.4
• TypeScript Version: N/A
• Browser and Version: Chrome 67
• OS: OSX Sierra
• Node Version: 8.11.3
• Package Manager and Version: npm 5.6.0

[ghost]

Related React issues:
facebook/react#2291
facebook/react#4210

These have been closed but reading through the comments there is no true resolution. But there has got to be a clean workaround.

[ghost]

Looks like this could be a batching issue 🤔 React pre-16 only batches events, and handleBlur is forced to persist its event. This could mean that for trivial cases upgrading to React 16 would be sufficient, but this would likely be a race condition.

[stale]

Hola! So here's the deal, between open source and my day job and life and what not, I have a lot to manage, so I use a GitHub bot to automate a few things here and there. This particular GitHub bot is going to mark this as stale because it has not had recent activity for a while. It will be closed if no further activity occurs in a few days. Do not take this personally--seriously--this is a completely automated action. If this is a mistake, just make a comment, DM me, send a carrier pidgeon, or a smoke signal.

[stale]

ProBot automatically closed this due to inactivity. Holler if this is a mistake, and we'll re-open it.

[ivoreis]

@enagy-earnup any luck with this?

[ghost]

@ivoreis yes! I was going about this all wrong, and it showed 😄 I was trying to put the submit on the button as opposed to putting it on the form, and that was causing a number of issues. I don't think my example really shows the code at fault. In short: use standard html best practices 😅

[brujorge]

I fixed this issue by using React.memo to create a component for the submit button and preventing the component to re-render after an element loses focus and triggers the onBlur validation since the props of the submit button won't change. Does anyone have any other workaround?