Vee Validate + Shadcn Tabs - Validation Not Clearing After Input in Hidden Tab

[SAntoineS]

Description

I'm experiencing an issue where validation errors persist even after filling in the required fields, particularly when those fields are inside a hidden tab. I tried replicating the issue in a demo on Stackblitz, and there, when I switch tabs, it seems that the validation resets correctly.

For example:

• If I submit the form on Tab 1, switch to Tab 2, then switch back to Tab 1, the validation error messages disappear on the demo.
• We can see the validation error message flashed just after switching tabs.

Here’s what’s happening on my project:

• I have a form with multiple tabs using Shadcn.
• On Tab 1, I click Submit, and it shows the validation error for a required field that is located in Tab 2 (which isn't visible at the time).
• When I switch to Tab 2 and fill in the required field, the error for that field does not disappear. It remains as "required", and I can't submit the form even though the field is properly filled.

Expected Behavior

• After filling in the required field on Tab 2, the validation message should disappear and allow the form to be submitted.

Actual Behavior

• The validation error persists even after the field is filled. The form remains invalid and cannot be submitted.

Question

• Is this related to how Shadcn or Vee Validate handle fields within hidden tabs? Is there a specific approach or workaround needed to ensure the validation updates correctly when switching between tabs?

Environment

• Vee Validate Version: 4.13.2
• Shadcn Version(radix): 1.9.5
• Vue Version: 3.5.4
• Browser: Chrome

I would appreciate any guidance or advice on how to resolve this issue.

[sadeghbarati]

@SAntoineS Hi, please try to provide a better reproduction next time, cause your demo is so disordered

Check this Stackblitz

https://stackblitz.com/edit/qxp1zy?file=package.json,src%2FApp.vue