Initial errors are always set when using composition api & vuetify dialogs

[themustafaomar]

What happened?

Hi, firstly thank you for making such a great vee-validate, really appreciate it!

I'm having an issue when using Composition API and opening a Vuetify dialog containing the form validations.

It's always has an initial error Eamil is a required field I've been trying for days in spare time to solve this issue without any result, I gave HOC a try, it's working but unfortunately it doesn't suit us for some reasons.

Reproduction steps

• Click open
• By default it will show an error message Eamil is a required field
• Close it and then open it again, for some reason it will work
• To reproduce the issue again hit the refresh icon

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-issue-repproduction?file=src%2Fcomponents%2FDialog.vue

Code of Conduct

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

[logaretm]

Not a bug this is intended. This is because errors in the form that predate the field being mounted are inherited by the field. vee-validate has no way to know if that field is going to be rendered or not. Your work around is correct so use it if it works for you.

This came up a few times, perhaps this is something we need to change, like clear the error when a field is mounted. I need to think about it so I won't be closing this.

[themustafaomar]

Thanks for the fast response 🎉

[robinpilz]

We have a similar and probably related issue when using quasar dialogs.
After upgrading to >= 4.9.0 all of our dialogs show error messages when adding an entity despite having reset the form and therefore all errors using resetForm

Reproduction:

1. Click Add Button
2. Error messages are displayed

Demo link:
https://stackblitz.com/edit/vee-validate-v4-quasar-framework-y3hxsk?file=src%2FEditDialog.vue

We downgraded to a previous version for now, but would be great if there would be some kind of solution for this use case without the workaround.

Maybe also related to #4323

[metalsadman]

@robinpilz you didn't call reset() in your watch handler. I use dialog plugin and only call resetForm on @show when editing, you can also do it in your sb, but it'll have some delay where it shows error first then resets it.

[robinpilz]

@metalsadman reset() is called as its just passed as a callback for the watcher. Resetting on show works but has the drawback you mentioned.

I'm not sure how it exactly works under the hood, but for me it seems like when the fields get mounted, the errors for those fields are set even if the shared state did not have errors before and the fields were not even touched. Just feels kind of odd

[besrabasant]

I think this line is causing the validation to fire when the form is getting mounted

vee-validate/packages/vee-validate/src/useForm.ts

Line 825 in 8bd9efa

formCtx.validateSchema('silent');

[logaretm]

@robinpilz Yep it feels odd now which is why I'm considering changing that behavior.

@besrabasant That is correct, but the errors being placed for non-existent fields due to that silent validation is intended. The not intended part is errors inheriting their previous state before they were mounted, somewhere in createPathState fn.