[V4] Inconsistent behaviour with checkbox meta.valid property

[Antimated]

What happened?

Hi,

I have this form with a consent checkbox at the bottom of the form. I used this example pulled from the docs to create the checkmark. The problem is that meta.valid (and probably other meta properties) are working very inconsistent... I also provided a demo link below, as well as some reproduction steps (me and my coworker both tested these reproduction steps so I hope they also work for you.)

Reproduction steps

1. Check the checkbox
2. Uncheck the checkbox
3. Click somewhere in the page (e.g. the meta object)
4. Click a few times on the checkbox and see that the meta.valid prop is not updated correctly (unless you click next to it)
   ...

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

• Firefox
• Chrome
• Safari
• Microsoft Edge

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-v4-checkboxes-snurs1?file=src%2FApp.vue

Code of Conduct

• I agree to follow this project's Code of Conduct

[logaretm]

Thanks for reporting this. The bug was caused by the input event triggering before the change event. Since both signal a value change, vee-validate tries to avoid toggling the value twice by skipping it for the change event.

This means the validation could also be incorrectly skipped. I am working on a fix at the moment.