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 · 0 comments

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

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

1 participant