Skip to content
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

useForm's meta.dirty is true when data is set asynchronously with resetForm #4320

Closed
5 tasks done
zwirn1981 opened this issue Jun 19, 2023 · 1 comment
Closed
5 tasks done
Labels
🐛 bug Unintended behavior

Comments

@zwirn1981
Copy link

What happened?

I forgot to update Vee Validate in my project for a while and so the version jumped from 4.8.6 to 4.9.6.
With the new version and without me changing the code, the validation behaved differently.
I am using useForm in a component and have a custom input component that uses useField. I use axios to get data asynchronously from a backend and then use the resetForm method to push the data into the form as recommended.

Since there are optional fields, the data from the backend may not contain all fields. The scheme knows 2 fields but only 1 field comes from the backend.
Up to version 4.8.6 everything was fine, but from version 4.9.0 there is a problem. The meta.dirty property of useForm was always false after resetForm, since version 4.9.x it is true. However, this is very unfavorable. The problem only occurs when fewer fields come from the backend. If all fields from the backend are included, meta.dirty remains false even from version 4.9.x.

Unfortunately, the changelog hasn't been updated yet, so I can't tell if it's a bug or a feature.
However, it is strange that meta.dirty is false if all fields are filled and true if fields are missing.
Also the weird thing is that all custom input fields in useField have meta.dirty=false but useForm has meta.dirty=true.
I've attached an example at StackBlitz. If you use version 4.8.6 in package.json everything works as usual, if you use version 4.9.x meta.dirty becomes true.
I hope you can understand my problem.

Reproduction steps

open StackBlitz Example
change vee-validate version in package.json to 4.8.6
run project
-> meta.dirty in useForm is false
-> meta.dirty in useFields is false
-> Perfect behavior

change vee-validate to some 4.9.x version in package.json
only use "name" in resetForm
rerun project
-> meta.dirty in useForm is true
-> meta.dirty in useFields is false
-> Problem, How can the form be dirty if all fields are not dirty.

again use version 4.9.x in package.json
append "email: 'test@test.com'" in resetForm
rerun project
-> meta.dirty in useForm is false
-> meta.dirty in useFields is false
-> Normal Behavior

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-custom-inputs-jidseh?file=src%2FApp.vue

Code of Conduct

@logaretm logaretm added the 🐛 bug Unintended behavior label Jun 19, 2023
@logaretm
Copy link
Owner

logaretm commented Jun 19, 2023

This is indeed a bug, not sure what introduced it but the main reason is initialValues when compared to currentValues is one will include email being undefined and the other won't include it.

I suspect it is because setValues behavior was changed to be a merge instead of an assign.

Working on a fix.

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

No branches or pull requests

2 participants