Formik: Anchor within (focused) form needs to be clicked twice

[otbe]

🐛 Bug report

Current Behavior

If you place an anchor within a formik form, this anchor needs to be clicked twice if one of its inputs is focused.
Our use case is: you open a site with a form and the first input is (auto)focused so you can start filling in our form. At the bottom there a 2 actions: a submit button and a cancel link (which will simply redirect you to the previous page). If I open the site, scroll down and click "cancel" nothing happens besides form validating. I must hit the cancel link one more time to get redirected.

Expected behavior

I only want to click the cancel link once :)

Reproducible example

https://codesandbox.io/s/54lnrqylx4

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.5.0
| React | 16.8.1
| TypeScript | 3.3.1
| Browser | all
| npm/Yarn | 1.13
| Operating System | OSX Mojave

[ridakaddir]

@otbe the first click fire the onBlur event on your <a> component and the onBlur execute the form validation.
you can fix it by disabling the validateOnBlur={false} (a property of <Formik/> component), but this will disable also the live validation effect on your form.
i don't know if there is an option to disable validateOnBlur in a specific component inside <Formik/> ?!

[otbe]

Yeah that came also to my mind. It seems that our component (and the basic anchor tag in it) gets re-rendered (and replaced) caused by the setState in the onBlur handlers. The browser loses the click event on the anchor and nothing happens.

Its fixable for us by using React.memo() on our component which will suppress an additional rerender (because the props dont change)

[brandonarbini]

I'm still experiencing this even with memo. I had to use onMouseDown on the link components that are within the scope of Formik because onBlur ended up rerendering the form and the link triggering the onClick. I think this is simply how React works, but it confused me for a time.

Edit: memo didn't fix it for me because I'm using the HOC and props do change after validation runs on blur.

[andreareginato]

@brandonarbini I had the same issue, and I could solve it only by using onMouseDown.
Did you find out any other reason for this behaviour. It's not that clear to me.

[johnrom]

I left a pretty good description of the issue here: https://github.com/jaredpalmer/formik/issues/1796#issuecomment-528078537

And a few options for solving it here: https://github.com/jaredpalmer/formik/issues/1796#issuecomment-605685583

tl;dr: The validation error message is pushing down your submit button before mouseup, resulting in the click hitting outside of the button.