fix: hoist nested errors to the nearest parent state (#4259)

Author: logaretm

.changeset/yellow-socks-poke.md

@@ -0,0 +1,5 @@
+---
+'vee-validate': patch
+---
+
+fix: hoist nested errors path to the deepest direct parent

packages/vee-validate/src/useForm.ts

@@ -326,13 +326,13 @@ export function useForm<
       // this ensures we have a complete key map of all the fields
       const paths = [
         ...new Set([...keysOf(formResult.results), ...pathStates.value.map(p => p.path), ...currentErrorsPaths]),
-      ] as string[];
+      ].sort() as string[];
 
       // aggregates the paths into a single result object while applying the results on the fields
       return paths.reduce(
         (validation, _path) => {
           const path = _path as Path<TValues>;
-          const pathState = findPathState(path);
+          const pathState = findPathState(path) || findHoistedPath(path);
           const messages = (formResult.results[path] || { errors: [] as string[] }).errors;
           const fieldResult = {
             errors: messages,
@@ -384,6 +384,20 @@ export function useForm<
     return pathState as PathState<PathValue<TValues, TPath>> | undefined;
   }
 
+  function findHoistedPath(path: Path<TValues>) {
+    const candidates = pathStates.value.filter(state => path.startsWith(state.path));
+
+    return candidates.reduce((bestCandidate, candidate) => {
+      if (!bestCandidate) {
+        return candidate as PathState<PathValue<TValues, Path<TValues>>>;
+      }
+
+      return (candidate.path.length > bestCandidate.path.length ? candidate : bestCandidate) as PathState<
+        PathValue<TValues, Path<TValues>>
+      >;
+    }, undefined as PathState<PathValue<TValues, Path<TValues>>> | undefined);
+  }
+
   let UNSET_BATCH: Path<TValues>[] = [];
   let PENDING_UNSET: Promise<void> | null;
   function unsetPathValue<TPath extends Path<TValues>>(path: TPath) {

packages/vee-validate/tests/useForm.spec.ts

@@ -288,6 +288,67 @@ describe('useForm()', () => {
     spy.mockRestore();
   });
 
+  test('hoists nested field errors to their parent if no field has it', async () => {
+    let form!: FormContext;
+    mountWithHoc({
+      setup() {
+        form = useForm({
+          validationSchema: yup.object({
+            name: yup.object({
+              value: yup.string().required(REQUIRED_MESSAGE),
+            }),
+          }),
+          validateOnMount: true,
+        });
+
+        useField('name');
+
+        return {};
+      },
+      template: `
+      <div></div>
+    `,
+    });
+
+    await flushPromises();
+    expect(form.errors.value.name).toBe(REQUIRED_MESSAGE);
+    expect(form.meta.value.valid).toBe(false);
+  });
+
+  test('selects the deepest candidate for hoisted errors', async () => {
+    let form!: FormContext<any>;
+    mountWithHoc({
+      setup() {
+        form = useForm({
+          validationSchema: yup.object({
+            names: yup.object({
+              value: yup.array().of(yup.object({ name: yup.string().required(REQUIRED_MESSAGE) })),
+            }),
+          }),
+          validateOnMount: true,
+          initialValues: {
+            names: {
+              value: [{ name: '' }, { name: '' }, { name: '' }],
+            },
+          },
+        });
+
+        useField('names.value');
+        useField('names');
+
+        return {};
+      },
+      template: `
+      <div></div>
+    `,
+    });
+
+    await flushPromises();
+    expect(form.errors.value.names).toBe(undefined);
+    expect(form.errors.value['names.value']).toBe(REQUIRED_MESSAGE);
+    expect(form.meta.value.valid).toBe(false);
+  });
+
   test('resets the meta valid state on reset', async () => {
     let passwordValue!: Ref<string>;
     mountWithHoc({