resetForm not fully clearing errors when used with v-model

[emikoshi]

What happened?

I recently upgraded from v4.8.6 to v4.9.6 and have noticed some strange behavior with resetForm. Upon calling resetForm which I expose from the <Form> slot, the fields will still show an error message. It isn't until a second call/click to resetForm do the error message dissappear.

I don't think my use case is all that out of the ordinary but I do have v-models on my component wrappers, they take advantage of useField in tandem with Vuetify. I haven't had an issue with using resetForm in this manner until upgrading. I did some rollbacks and confirmed this issue persists with any version >= 4.9.0.

Some other things worth mentioning:

• If I remove v-model on the component wrapper then things work and the error messages go away on first click of resetForm.
• I also exposed resetField just to see if that was working and can confirm there is no issue using it with my use case stated above.

Reproduction steps

1. Type something in the email field
2. Click 'Reset Form'

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-vuetify-ij2lnu?file=src%2FApp.vue

Code of Conduct

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

[emikoshi]

Following up to this, I found out what is causing the issue. Inside the component file <TextFieldWithValidation> I am doing type validation on the modelValue prop. If I remove the setting default: null, then things work as they should and that seem to do the trick.

If it's easy enough to explain, it would be great to know why this still works on v4.8.6 vs >=4.9.0, otherwise this can be marked as closed.

[logaretm]

4.9 had a major refactor under the hood. It is possible that there are two write operations forcing a re-validation after a reset. I can't see the behavior in the example, can you update it so it triggers the issue? I would like to get to the bottom of it and explain if its intended as of 4.9 or if its something that needs fixing.

[emikoshi]

@logaretm apologies, I forgot to undo changes when I was testing fixes out. Things are reverted now so you should be able to see the issue [typing something in the field, then clicking reset form].

Something again I noticed, using undefined as a default also works. I assume that's because it is the fallback resetForm uses when there are no initial values set.

[logaretm]

Took a look again, and it is not a bug. The button rendered by default has a type of submit when in a form. So when you click on either buttons, two things happen:

• Form/Field is reset
• Form is submitted and re-validated

If you switch the button type to button using native HTML button and add type="button" attribute it works as expected. I don't think vuetify supports button types AFAIK.

Not sure what a good workaround is, this feels like a weird limitation. I think you could either:

• Render a different thing than a form with v-form and handle submissions using slot props.
• Use composition API and avoid all the HTML spec confusion.

Now why did that ever work in 4.8, I'm not sure. Looking at this, it should've never worked.

[emikoshi]

Thanks, appreciate the explanation!

[diegocsan]

I'm having this same issue and moving the button outside of the Form does not seem to fix it. In my case, my custom component has a watcher to detect external VModel modifications to trigger handleChange. In 4.8.5, resetForm did not trigger any validations after the value is updated, but now it is showing required errors.

As @emikoshi says, running resetForm again removes the errors.

[logaretm]

@diegocsan I have explained why it happened in this issue and to me the behavior happening here makes sense. The form is both resetting and submitting so it is down to a race condition for whichever to run last. One possible reason is reset was doing less steps in 4.8.

Since you created a new issue, provide an example for it and I can check it out, it could be a bug or a case like this where it is intended but wasn't visible in previous releases.

[diegocsan]

Extended the information in #4323