Multi-step form with transition between dynamic components

[richardbaltariu]

What happened?

Using vee-validate v4.4.9

I'm using the <component> tag to render the different steps of the form under a <transition> tag. The issue I have is that when going to the second step or any of the next steps, validation (i.e. error messages show up) runs without changing any values and/or hitting submit (next button).

I've tried a couple of things but was unable to make it work.

I'm not sure what the issue might be, it seems the transition tag is doing something that breaks the validation. If I take out the transition tag then everything works well.

Reproduction steps

1. Create a simple form with every step being its own component
2. Use <transition> and <component> to render the steps
3. Go to step 2 and see errors messages showing up

Version

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

What browsers are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Relevant log output

No response

Demo link

https://codesandbox.io/s/vee-validate-multi-step-form-issue-puerc?file=/src/App.vue

Code of Conduct

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

[logaretm]

Thanks for this. I'm assuming this is a race condition issue.

To quickly explain it: the default logic for when a field is mounted is:

• Check if it has value and adopts it (either initial or already set manually)
• Check if it has any errors and validates it again to see if they match and adopt them (this is the problem)

This happens when the form validates before the fields are mounted. This validation occurs because the schema changed.

As you can see it is tricky to figure out when to adopt errors or when not to.

There are two workarounds here:

• You can call nextTick then resetForm whenever you update the current step.
• You explicitly show the errors when the field is touched, I recommend this because it is much simpler and makes the form less aggressive.