fix: handle nested value change validation #3926 (#3929)

logaretm · Sep 18, 2022 · 771e7f2 · 771e7f2
1 parent cdaf22d
commit 771e7f2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 1 deletion.
diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -219,16 +219,18 @@ function _useField<TValue = unknown>(
   }
 
   let unwatchValue: WatchStopHandle;
+  let lastWatchedValue = deepCopy(value.value);
   function watchValue() {
     unwatchValue = watch(
       value,
       (val, oldVal) => {
-        if (isEqual(val, oldVal)) {
+        if (isEqual(val, oldVal) && isEqual(val, lastWatchedValue)) {
           return;
         }
 
         const validateFn = validateOnValueUpdate ? validateWithStateMutation : validateValidStateOnly;
         validateFn();
+        lastWatchedValue = deepCopy(val);
       },
       {
         deep: true,

diff --git a/packages/vee-validate/tests/useField.spec.ts b/packages/vee-validate/tests/useField.spec.ts
@@ -29,6 +29,44 @@ describe('useField()', () => {
     expect(error?.textContent).toBe(REQUIRED_MESSAGE);
   });
 
+  // #3926
+  test('validates when nested value changes', async () => {
+    mountWithHoc({
+      setup() {
+        const { value, errorMessage } = useField<any>(
+          'field',
+          val => {
+            if (!val?.name) {
+              return REQUIRED_MESSAGE;
+            }
+
+            return true;
+          },
+          {
+            initialValue: { name: 'test' },
+          }
+        );
+
+        onMounted(() => {
+          value.value.name = '';
+        });
+
+        return {
+          value,
+          errorMessage,
+        };
+      },
+      template: `
+      <span>{{ errorMessage }}</span>
+    `,
+    });
+
+    const error = document.querySelector('span');
+
+    await flushPromises();
+    expect(error?.textContent).toBe(REQUIRED_MESSAGE);
+  });
+
   test('valid flag is correct after reset', async () => {
     mountWithHoc({
       setup() {