click handler on submit button inconsistently called

🐛 Bug report

Current Behavior

I have a form set up with:

• initialValues prop on <Formik /> which populates all fields with valid values
• Submit button of type submit
• onSubmit prop on <Formik />
• validateOnBlur set as default
• validateOnChange set as default
• validationSchema prop on <Formik /> which contains Yup validation schema
• A click handler on the submit button. The purpose of this click handler is arbitrary. For purposes of this bug assume it simply console logs a message but it not used in any way to manipulate the form values nor interact in any way with the Formik API.

Under these conditions I have a form which is pre-populated with the initial values that pass the validation schema. I invalidate one of the fields. Then without triggering a field blur event I click directly on the submit button. The validation is triggered but the click handler on the submit button is called only some of the time suggesting a race condition.

Expected behavior

The click handler on the submit button is always called whenever the submit button is clicked.

Your environment

Software	Version(s)
Formik	1.5.4
React	16.8.6
TypeScript	N/A
Browser	Chrome 76.0
npm/Yarn	npm
Operating System	Mac OSX 10.14.6

[martinpengellyphillips]

For reference, I fixed this in my case by attaching the following to my submit button in order to subvert the blur behaviour.

    onMouseDown={(event)=>{event.preventDefault()}}

[johnrom]

Can you create a sandbox for this issue?

My guess at the moment is going to be that when you click the submit button, the error appears and pushes the submit button on your form down, so it actually moves past where you originally clicked, resulting in a click on the container instead of the submit button.

https://codesandbox.io/s/91q6rxmmrp