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

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

Open
5 tasks done
Aurimas-sys opened this issue Oct 2, 2024 · 1 comment
Labels
✨ enhancement a "nice to have" feature

Comments

@Aurimas-sys
Copy link

Aurimas-sys commented Oct 2, 2024

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?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

No response

Demo link

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

Code of Conduct

@logaretm
Copy link
Owner

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.

@logaretm logaretm added the ✨ enhancement a "nice to have" feature label Oct 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ enhancement a "nice to have" feature
Projects
None yet
Development

No branches or pull requests

2 participants