fix: handle single field meta reactivity closes #4738

logaretm · May 6, 2024 · 1376794 · 1376794
1 parent f231a07
commit 1376794
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 5 deletions.
diff --git a/.changeset/lucky-feet-tease.md b/.changeset/lucky-feet-tease.md
@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+fix: handle meta.required for single field schemas closes #4738
diff --git a/packages/vee-validate/src/types/forms.ts b/packages/vee-validate/src/types/forms.ts
@@ -84,7 +84,7 @@ export interface PathStateConfig {
   label: MaybeRefOrGetter<string | undefined>;
   type: InputType;
   validate: FieldValidator;
-  schema?: TypedSchema;
+  schema?: MaybeRefOrGetter<TypedSchema | undefined>;
 }
 
 export interface PathState<TValue = unknown> {

diff --git a/packages/vee-validate/src/useField.ts b/packages/vee-validate/src/useField.ts
@@ -142,14 +142,15 @@ function _useField<TValue = unknown>(
     return normalizeRules(rulesValue);
   });
 
+  const isTyped = !isCallable(validator.value) && isTypedSchema(toValue(rules));
   const { id, value, initialValue, meta, setState, errors, flags } = useFieldState<TValue>(name, {
     modelValue,
     form,
     bails,
     label,
     type,
-    validate: validator.value ? validate : undefined,
-    schema: isTypedSchema(rules) ? (rules as any) : undefined,
+    validate: validator.value && !isTyped ? validate : undefined,
+    schema: isTyped ? (rules as any) : undefined,
   });
 
   const errorMessage = computed(() => errors.value[0]);

diff --git a/packages/vee-validate/src/useFieldState.ts b/packages/vee-validate/src/useFieldState.ts
@@ -25,7 +25,7 @@ export interface StateInit<TValue = unknown> {
   label?: MaybeRefOrGetter<string | undefined>;
   type?: InputType;
   validate?: FieldValidator;
-  schema?: TypedSchema<TValue>;
+  schema?: MaybeRefOrGetter<TypedSchema<TValue> | undefined>;
 }
 
 let ID_COUNTER = 0;
@@ -210,7 +210,7 @@ function createFieldMeta<TValue>(
   currentValue: Ref<TValue>,
   initialValue: MaybeRef<TValue> | undefined,
   errors: Ref<string[]>,
-  schema?: TypedSchema<TValue>,
+  schema?: MaybeRefOrGetter<TypedSchema<TValue> | undefined>,
 ) {
   const isRequired = computed(() => toValue(schema)?.describe?.().required ?? false);
 

diff --git a/packages/yup/tests/yup.spec.ts b/packages/yup/tests/yup.spec.ts
@@ -423,6 +423,29 @@ test('reports required state reactively', async () => {
   await expect(meta.required).toBe(false);
 });
 
+test('reports single field required state reactively', async () => {
+  let meta!: FieldMeta<any>;
+  const schema = ref(toTypedSchema(yup.string().required()));
+  mountWithHoc({
+    setup() {
+      const field = useField('name', schema);
+      meta = field.meta;
+
+      return {
+        schema,
+      };
+    },
+    template: `<div></div>`,
+  });
+
+  await flushPromises();
+  await expect(meta.required).toBe(true);
+
+  schema.value = toTypedSchema(yup.string());
+  await flushPromises();
+  await expect(meta.required).toBe(false);
+});
+
 test('reports required false for non-existent fields', async () => {
   const metaSpy = vi.fn();
   mountWithHoc({