fix: added temporary fix for #2873 with form meta

logaretm · Aug 29, 2020 · 6e1bf17 · 6e1bf17
1 parent a543e89
commit 6e1bf17
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/packages/core/src/Form.ts b/packages/core/src/Form.ts
@@ -1,4 +1,4 @@
-import { h, defineComponent, watch } from 'vue';
+import { h, defineComponent, watchEffect } from 'vue';
 import { useForm } from './useForm';
 import { SubmissionHandler } from './types';
 import { normalizeChildren } from './utils';
@@ -35,8 +35,16 @@ export const Form = defineComponent({
     }
 
     // FIXME: for whatever reason that's beyond me, this fixes the reactivity issue
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    watch(errors, () => {});
+    watchEffect(() => {
+      // eslint-disable-next-line no-unused-expressions
+      errors.value;
+      // eslint-disable-next-line no-unused-expressions
+      meta.value;
+      // eslint-disable-next-line no-unused-expressions
+      values.value;
+      // eslint-disable-next-line no-unused-expressions
+      isSubmitting.value;
+    });
 
     return () => {
       const children = normalizeChildren(ctx, {

diff --git a/packages/core/tests/Form.spec.ts b/packages/core/tests/Form.spec.ts
@@ -713,4 +713,24 @@ describe('<Form />', () => {
 
     jest.useRealTimers();
   });
+
+  test('aggregated meta reactivity', async () => {
+    const wrapper = mountWithHoc({
+      template: `
+      <VForm @submit="onSubmit" v-slot="{ meta }">
+        <Field name="field" as="input" rules="required"  />
+
+        <button :disabled="meta.invalid" id="submit">Submit</button>
+      </VForm>
+    `,
+    });
+
+    const submitBtn = wrapper.$el.querySelector('#submit');
+    const input = wrapper.$el.querySelector('input');
+    await flushPromises();
+    expect(submitBtn.disabled).toBe(true);
+    setValue(input, '12');
+    await flushPromises();
+    expect(submitBtn.disabled).toBe(false);
+  });
 });