Vee-validate: Checkbox touched flag doesn't changed in Safari and FireFox for mac

[maxxdev]

Versions:

• VueJs: lates
• Vee-Validate: rc6

Description:

https://jsfiddle.net/r7qwke1f/26/

Steps To Reproduce:

Open fiddle in Safari or FireFox for mac.
Click on checkbox. Expected "touched": true but getting "touched": false

[logaretm]

That is weird, I tested it on FireFox 54.0 on Windows and it is working fine, I will try to get my hands on a Mac.

[maxxdev]

Yep, this issue reproduces on Mac only

[ThomHurks]

I updated the JSFiddle for newer Vue and to use the latest (master branch) VeeValidate. Now it also seems to behave in a weird and inconsistent way on Chrome, for Safari and Firefox it's always false as before. All tested on Mac, and even tested on Safari Technology Preview.
https://jsfiddle.net/r7qwke1f/30/

[logaretm]

@Abdelrahman3D Do you mind debugging this for me?

[ThomHurks]

Look at this JSFiddle:
https://jsfiddle.net/r7qwke1f/34/

It works on Safari and Firefox on Mac :)

The reason? I changed the checkbox to a text input.
If you go to https://www.quirksmode.org/dom/events/blurfocus.html and look at the section about Form Fields you can see it says

Firefox Mac and Safari and Chrome do not fire the events on radios and checkboxes if the user uses a mouse.

Apparently there are some workarounds such as manually sending a focus event on click when dealing with checkboxes.

[logaretm]

@ThomHurks Thanks for your follow up on this, I had no idea about that behavior. I opted to listen for click like you mentioned so, all fields except checkboxes and radio buttons will set their touched and untouched flags when blurred, the checkboxes and radio will set them on click so its more like on focus instead of blur.

This would be the same behavior across all browsers for consistency.