fix: only validate when one of the setters is ran closes #4017

Author: logaretm

.changeset/brave-jars-rescue.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix field array triggering validation when an item is removed

packages/vee-validate/src/types/forms.ts

@@ -228,7 +228,6 @@ export interface PrivateFormContext<TValues extends GenericObject = GenericObjec
   errors: ComputedRef<FormErrors<TValues>>;
   meta: ComputedRef<FormMeta<TValues>>;
   isSubmitting: Ref<boolean>;
-  isResetting: Ref<boolean>;
   keepValuesOnUnmount: MaybeRef<boolean>;
   validateSchema?: (mode: SchemaValidationMode) => Promise<FormValidationResult<TValues, TOutput>>;
   validate(opts?: Partial<ValidationOptions>): Promise<FormValidationResult<TValues, TOutput>>;

packages/vee-validate/src/useField.ts

@@ -9,8 +9,7 @@ import {
   Ref,
   ComponentInternalInstance,
   onBeforeUnmount,
-  nextTick,
-  WatchStopHandle,
+  warn,
 } from 'vue';
 import { klona as deepCopy } from 'klona/full';
 import { validate as validateValue } from './validate';
@@ -220,7 +219,7 @@ function _useField<TValue = unknown>(
   function handleChange(e: unknown, shouldValidate = true) {
     const newValue = normalizeEventValue(e) as TValue;
 
-    value.value = newValue;
+    setValue(newValue, false);
     if (!validateOnValueUpdate && shouldValidate) {
       validateWithStateMutation();
     }
@@ -243,35 +242,7 @@ function _useField<TValue = unknown>(
     meta.touched = isTouched;
   }
 
-  let unwatchValue: WatchStopHandle;
-  let lastWatchedValue = deepCopy(value.value);
-  function watchValue() {
-    unwatchValue = watch(
-      value,
-      (val, oldVal) => {
-        if (form?.isResetting.value) {
-          return;
-        }
-
-        if (isEqual(val, oldVal) && isEqual(val, lastWatchedValue)) {
-          return;
-        }
-
-        const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
-        validateFn();
-        lastWatchedValue = deepCopy(val);
-      },
-      {
-        deep: true,
-      }
-    );
-  }
-
-  watchValue();
-
   function resetField(state?: Partial<FieldState<TValue>>) {
-    unwatchValue?.();
-
     const newValue = state && 'value' in state ? (state.value as TValue) : initialValue.value;
 
     setState({
@@ -284,26 +255,50 @@ function _useField<TValue = unknown>(
     meta.pending = false;
     meta.validated = false;
     validateValidStateOnly();
-
-    // need to watch at next tick to avoid triggering the value watcher
-    nextTick(() => {
-      watchValue();
-    });
   }
 
-  function setValue(newValue: TValue) {
+  function setValue(newValue: TValue, validate = true) {
     value.value = newValue;
+    if (!validate) {
+      return;
+    }
+
+    const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
+    validateFn();
   }
 
   function setErrors(errors: string[] | string) {
     setState({ errors: Array.isArray(errors) ? errors : [errors] });
   }
 
+  const valueProxy = computed({
+    get() {
+      return value.value;
+    },
+    set(newValue: TValue) {
+      setValue(newValue, validateOnValueUpdate);
+    },
+  });
+
+  if (__DEV__) {
+    watch(
+      valueProxy,
+      (value, oldValue) => {
+        if (value === oldValue && isEqual(value, oldValue)) {
+          warn(
+            'Detected a possible deep change on field `value` ref, for nested changes please either set the entire ref value or use `setValue` or `handleChange`.'
+          );
+        }
+      },
+      { deep: true }
+    );
+  }
+
   const field: PrivateFieldContext<TValue> = {
     id,
     name,
     label,
-    value,
+    value: valueProxy,
     meta,
     errors,
     errorMessage,

packages/vee-validate/src/useForm.ts

@@ -116,8 +116,6 @@ export function useForm<
   // Prevents fields from double resetting their values, which causes checkboxes to toggle their initial value
   let FIELD_ID_COUNTER = 0;
 
-  const isResetting = ref(false);
-
   // If the form is currently submitting
   const isSubmitting = ref(false);
 
@@ -479,7 +477,6 @@ export function useForm<
     submitCount,
     meta,
     isSubmitting,
-    isResetting,
     fieldArrays,
     keepValuesOnUnmount,
     validateSchema: unref(schema) ? validateSchema : undefined,
@@ -593,8 +590,6 @@ export function useForm<
    * Resets all fields
    */
   function resetForm(resetState?: Partial<FormState<TValues>>) {
-    isResetting.value = true;
-
     const newValues = resetState?.values ? resetState.values : originalInitialValues.value;
     setInitialValues(newValues);
     setValues(newValues);
@@ -610,7 +605,6 @@ export function useForm<
     submitCount.value = resetState?.submitCount || 0;
     nextTick(() => {
       validate({ mode: 'silent' });
-      isResetting.value = false;
     });
   }
 

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

@@ -722,6 +722,90 @@ test('clears old errors path when last item is removed and value update validati
   expect(errorList.children).toHaveLength(0);
 });
 
+// 4017
+test('keeps the errors intact if an item was removed in the middle of the list', async () => {
+  defineRule('required', (v: any) => (v ? true : REQUIRED_MESSAGE));
+  const InputField = defineComponent({
+    props: {
+      rules: {
+        type: null,
+        required: true,
+      },
+      name: {
+        type: String,
+        required: true,
+      },
+      label: String,
+      type: { type: String, default: 'text' },
+    },
+    setup(props) {
+      const { value, handleChange, errors } = useField(toRef(props, 'name'), props.rules, {
+        label: props.label,
+      });
+
+      return {
+        value,
+        errors,
+        handleChange,
+      };
+    },
+    template: `
+      <label :for="name">{{ label }}</label>
+      <input :type="type" :name="name" :value="value" @input="handleChange" />
+      <span>{{ errors[0] }}</span>
+      `,
+  });
+
+  mountWithHoc({
+    components: {
+      InputField,
+    },
+    setup() {
+      const initialValues = {
+        users: ['', '', ''],
+      };
+
+      const schema = yup.string().required();
+
+      return {
+        schema,
+        initialValues,
+      };
+    },
+    template: `
+      <VForm :initial-values="initialValues" v-slot="{ errors }">
+        <FieldArray name="users" v-slot="{ remove, push, fields }">
+          <fieldset v-for="(field, idx) in fields" :key="field.key">
+            <legend>User #{{ idx }}</legend>
+            <label :for="'name_' + idx">Name</label>
+            <InputField :name="'users[' + idx + ']'" :rules="schema" />
+
+            <button class="remove" type="button" @click="remove(idx)">X</button>
+          </fieldset>
+        </FieldArray>
+
+
+        <ul class="errors">
+          <li v-for="error in errors">{{ error }}</li>
+        </ul>
+
+        <button class="submit" type="submit">Submit</button>
+      </VForm>
+    `,
+  });
+
+  await flushPromises();
+  const errorList = document.querySelector('ul') as HTMLUListElement;
+  const removeBtnAt = (idx: number) => document.querySelectorAll('.remove')[idx] as HTMLButtonElement; // remove the second item
+
+  await flushPromises();
+  expect(errorList.children).toHaveLength(0);
+  removeBtnAt(1).click();
+  await flushPromises();
+
+  expect(errorList.children).toHaveLength(0);
+});
+
 test('moves items around the array with move()', async () => {
   const onSubmit = vi.fn();
   mountWithHoc({

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

@@ -29,23 +29,16 @@ describe('useField()', () => {
     expect(error?.textContent).toBe(REQUIRED_MESSAGE);
   });
 
-  // #3926
-  test('validates when nested value changes', async () => {
+  test('warns when nested value changes', async () => {
+    const spy = vi.spyOn(console, 'warn').mockImplementation(() => {
+      // NOOP
+    });
+
     mountWithHoc({
       setup() {
-        const { value, errorMessage } = useField<any>(
-          'field',
-          val => {
-            if (!val?.name) {
-              return REQUIRED_MESSAGE;
-            }
-
-            return true;
-          },
-          {
-            initialValue: { name: 'test' },
-          }
-        );
+        const { value, errorMessage } = useField<any>('field', undefined, {
+          initialValue: { name: 'test' },
+        });
 
         onMounted(() => {
           value.value.name = '';
@@ -61,10 +54,9 @@ describe('useField()', () => {
     `,
     });
 
-    const error = document.querySelector('span');
-
     await flushPromises();
-    expect(error?.textContent).toBe(REQUIRED_MESSAGE);
+    expect(spy).toHaveBeenCalled();
+    spy.mockRestore();
   });
 
   test('valid flag is correct after reset', async () => {