fix: clean error message for singular fields after unmount

logaretm · Jul 8, 2021 · 3fe5f21 · 3fe5f21
1 parent cfe45ba
commit 3fe5f21
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 0 deletions.
diff --git a/packages/vee-validate/src/useForm.ts b/packages/vee-validate/src/useForm.ts
@@ -353,6 +353,11 @@ export function useForm<TValues extends Record<string, any> = Record<string, any
 
       unsetPath(formValues, fieldName);
       unsetPath(initialValues.value, fieldName);
+      // clears a field error on unmounted
+      // #3384
+      nextTick(() => {
+        setFieldError(fieldName, undefined);
+      });
       return;
     }
 

diff --git a/packages/vee-validate/tests/Form.spec.ts b/packages/vee-validate/tests/Form.spec.ts
@@ -2115,4 +2115,32 @@ describe('<Form />', () => {
     // field was re-checked
     expect(span.textContent).toBe('');
   });
+
+  test('field errors should be removed when its unmounted', async () => {
+    const isShown = ref(true);
+    const wrapper = mountWithHoc({
+      setup() {
+        return {
+          isShown,
+        };
+      },
+      template: `
+      <VForm v-slot="{ errors }">
+        <Field v-if="isShown" name="fname"  rules="required"/>
+        <span>{{ errors.fname }}</span>
+      </VForm>
+    `,
+    });
+
+    await flushPromises();
+    const span = wrapper.$el.querySelector('span');
+    setValue(wrapper.$el.querySelector('input'), '');
+    await flushPromises();
+    expect(span.textContent).toBe(REQUIRED_MESSAGE);
+    isShown.value = false;
+
+    await flushPromises();
+    // field was re-checked
+    expect(span.textContent).toBe('');
+  });
 });