Skip to content

resetField({ value: undefined }) prevents the form from becoming valid after updating the field #4996

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
5 tasks done
Tcharlyson opened this issue Feb 27, 2025 · 2 comments

Comments

@Tcharlyson
Copy link

What happened?

After upgrading Vee-Validate from version 4.1.6 to 4.15.0, using resetField({ value: undefined }) prevents the form from becoming valid again, even after entering a new valid value.

Reproduction steps

  1. Fill in a form field with a valid value.
  2. Call resetField({ value: undefined }) to reset the field.
  3. Enter a new valid value in the field.
  4. Notice that the form remains invalid despite the correct input.

The form should become valid again once a new valid value is entered after resetting the field.

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

Demo link

https://stackblitz.com/edit/vee-validate-v4-multi-step-form-composition-8hwywbjf?file=src%2Fcomponents%2FFirstStep.vue

Code of Conduct

@vonBrax
Copy link
Contributor

vonBrax commented Mar 15, 2025

The problem seems to be that you're calling useField twice for the same field (in FirstStep.vue and TextInput.vue).
If you remove one of those calls, the form validation starts working again:

https://stackblitz.com/edit/vee-validate-v4-multi-step-form-composition-1qhvmypb?file=src%2Fcomponents%2FFirstStep.vue

@Tcharlyson
Copy link
Author

The problem seems to be that you're calling useField twice for the same field (in FirstStep.vue and TextInput.vue). If you remove one of those calls, the form validation starts working again:

https://stackblitz.com/edit/vee-validate-v4-multi-step-form-composition-1qhvmypb?file=src%2Fcomponents%2FFirstStep.vue

Thanks a lot for your answer, it's of course a solution but I think there's something missing under the hood, cause a composable is meant to be used twice or more, unless I'm mistaken here ?

What do you think @logaretm ?

Thanks for your time :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants