Formik: click handler on submit button inconsistently called

[leanne2]

🐛 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

[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

[martinpengellyphillips]

Just to confirm that I encountered this behaviour just now. @johnrom - in my case you are correct that the button is pushed down when the error appears. If I click near the top of the submit button my handler does not get called. Whereas, if I click near the bottom of the button then my handler does get called.

Is there a way to fix this (beyond avoiding the UI shift altogether)?

[johnrom]

You can disable validateOnblur, prevent a shift with css, add a transition delay to your error appearing so that it pushes the content down after the click finishes, or you can move the blur handler to the onBlurCapture event of your input, which, assuming it is still a thing, should result in touched being set after the click event.

[martinpengellyphillips]

Thanks for the hints - I'd missed that validateOnBlur was being called (and was the underlying the cause).

[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]

Awesome. @leanne2 any chance this solves your issue as well?