fix: handle absent model value closes #3468

logaretm · Aug 31, 2021 · 2c4a7ff · 2c4a7ff
1 parent 2d8ad87
commit 2c4a7ff
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/packages/vee-validate/src/Field.ts b/packages/vee-validate/src/Field.ts
@@ -168,7 +168,7 @@ export const Field = defineComponent({
       }
 
       if (newModelValue !== applyModifiers(value.value, props.modelModifiers)) {
-        value.value = newModelValue;
+        value.value = (newModelValue as any) === IS_ABSENT ? undefined : newModelValue;
         validateField();
       }
     });

diff --git a/packages/vee-validate/tests/Field.spec.ts b/packages/vee-validate/tests/Field.spec.ts
@@ -1038,4 +1038,28 @@ describe('<Field />', () => {
     await flushPromises();
     expect(value.value).toBe(false);
   });
+
+  // #3468
+  test('should avoid setting the absent value to Vue', async () => {
+    const form = ref({});
+    const wrapper = mountWithHoc({
+      setup() {
+        return {
+          form,
+        };
+      },
+      template: `
+        <Field v-model="form.value" name="hello" />
+      `,
+    });
+
+    await flushPromises();
+    const input = document.querySelector('input') as HTMLInputElement;
+    setValue(input, '1234');
+    await flushPromises();
+    expect(input.value).toBe('1234');
+    form.value = {};
+    await flushPromises();
+    expect(input.value).toBe('');
+  });
 });