search

logaretm / vee-validate

✅ Painless Vue forms
https://vee-validate.logaretm.com/v4
MIT License
10.85k stars 1.28k forks source link

Only value property is saved when using keep-alive on <Field> component/keepValueOnUnmount in useField #4878

Open Aurimas-sys opened 2 months ago

Aurimas-sys commented 2 months ago

What happened?

I am not sure if this is the intended functionality or a bug, or maybe i am doing something incorrectly.

Currently, i am able to only keep alive value upon component unmount - other properties are reset. I attached link to a preview - try to enter some text, toggle it to unmount, then to remount. Value is preserved, but other properties are not. This causes major issues as field that was previously "dirty", becomes not "dirty", fields initial value is reset to the current value rather than to the value that it had once it was first mounted. If it is intended, it raises some questions whether it's the correct approach of handling unmounting - what if user is navigating through multi-step form, leaves error on the first page input, moves to second page, comes back to first page and the error is gone from display, initial value is set to that of the current value etc. I believe there are other scenarios where this can cause major breaking behavior. The same behavior can be seen when using useForm/useField syntax.

Reproduction steps

  1. Create a form and a unmount button for simple demonstration. Add keep-value property.
  2. Enter text, unmount field, remount it.
  3. Observe the behavior described in the bug section.

Version

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

What browsers are you seeing the problem on?

Relevant log output

No response

Demo link

https://stackblitz.com/edit/vee-validate-issue-template-b3t3et?file=src%2FApp.vue

Code of Conduct

logaretm commented 1 month ago

While this is intended, I think you are also right. A field is more than just a value, however the useForm composable doesn't try to optimize for multistep forms.

You can work around this by re-validating the step when you switch to it with the validate() function. This might be a good candidate enhancement for v5 if we introduce a useMultistepForm kind of thing but no plans for that at the moment.

Marking this as an enhancement for now.