fix: remove path state with keep-values closes #4247

Author: logaretm

.changeset/kind-bikes-turn.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fixed validations running for unmounted fields

packages/vee-validate/src/useField.ts

@@ -407,11 +407,13 @@ function _useField<TValue = unknown>(
   onBeforeUnmount(() => {
     PENDING_UNMOUNT = true;
     const shouldKeepValue = unref(field.keepValueOnUnmount) ?? unref(form.keepValuesOnUnmount);
+    const path = unravel(name);
     if (shouldKeepValue || !form) {
+      form?.removePathState(path);
+
       return;
     }
 
-    const path = unravel(name);
     const pathState = form.getPathState(path);
     const matchesId =
       Array.isArray(pathState?.id) && pathState?.multiple

packages/vee-validate/tests/Form.spec.ts

@@ -3043,3 +3043,47 @@ test('unmounted radio fields gets unregistered and their values are removed if c
   expect(errors.textContent).toBe('{}');
   expect(JSON.parse(values.textContent)).toEqual({});
 });
+
+// #4247
+test('unmounted fields should not be validated when keep-values is on', async () => {
+  let showFields!: Ref<boolean>;
+  const spy = vi.fn();
+  const wrapper = mountWithHoc({
+    setup() {
+      showFields = ref(true);
+
+      return {
+        showFields,
+        onSubmit(values: any) {
+          spy(values);
+        },
+      };
+    },
+    template: `
+      <VForm @submit="onSubmit" v-slot="{ errors }" keep-values>
+        <template v-if="showFields">
+          <Field name="test" rules="required" />
+        </template>
+
+        <button>Submit</button>
+      </VForm>
+    `,
+  });
+
+  await flushPromises();
+  const button = wrapper.$el.querySelector('button');
+  const inputs = wrapper.$el.querySelectorAll('input');
+
+  wrapper.$el.querySelector('button').click();
+  await flushPromises();
+  setValue(inputs[0], '');
+
+  showFields.value = false;
+  await flushPromises();
+  button.click();
+  await flushPromises();
+  const expected = {
+    test: '',
+  };
+  expect(spy).toHaveBeenLastCalledWith(expected);
+});