fix: handle single field meta reactivity closes #4738

Author: logaretm

Diff for: .changeset/lucky-feet-tease.md

@@ -0,0 +1,5 @@
+---
+"vee-validate": patch
+---
+
+fix: handle meta.required for single field schemas closes #4738

Diff for: 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 for: 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 for: 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 for: 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({