[BUG] Firefox: checkbox validation not triggered with validateOnBlur

[jedrzejiwanicki]

What is the current behavior?

Passing validateOnBlur prop to Form results in not validating the checkbox input in Firefox browser, as onBlur is not triggered in that browser.

What is the expected behavior?

Checkbox input should be validated.

Sandbox Link

Here is the issue presented. I placed two checkboxes, one with bug behavior, second with my workaround. To encounter the issue, please run it in Firefox.

https://codesandbox.io/s/yyw1r626z

What's your environment?

React Final Form: 3.0.5
Final Form: 4.0.1
Browser: Firefox 57.0.4

[maciejmyslinski]

When the first thing I did was checking the first checkbox, it worked.
However, when the first thing I did anything else (like click a button or check the second one) the bug occurred.

From what I can see it has something to do with onBlur event not firing on FF when one would expect.

I or @jedrzejiwanicki could propose a solution if you @erikras agree.

[maciejmyslinski]

@erikras ping

[maciejmyslinski]

@erikras any update?

[valyefimov]

Same for me

[dkulakov]

Having the same issue

[tylim88]

issue still persist

[hypeofpipe]

Issue still exists :/

[hypeofpipe]

@jedrzejiwanicki did you manage to fix the issue? 🤔

[jedrzejiwanicki]

@hypeofpipe Haven't submitted a PR unfortunately, my example has a workaround, have you tried it?

[hypeofpipe]

Yes, thank you, didn't notice it 🎉 ❤️

[gertdreyer]

This is a known difference between how Chrome vs Firefox and Safari handles checkbox focus - I you use tab to tab through the checkboxes the blur event fires its just on clicks which it does not.
See:

angular/angular#28830
https://bugzilla.mozilla.org/show_bug.cgi?id=756028
https://bugs.webkit.org/show_bug.cgi?id=13724