fix(react-form): remap listener paths in withFieldGroup

Author: kusiewicz

packages/form-core/src/FieldGroupApi.ts

@@ -472,4 +472,43 @@ export class FieldGroupApi<
 
   validateAllFields = (cause: ValidationCause) =>
     this.form.validateAllFields(cause)
+
+  /**
+   * Remaps field validator listener paths to their full form paths.
+   */
+  remapFieldProps = <TProps extends { validators?: any }>(
+    props: TProps,
+  ): TProps => {
+    const newProps = { ...props }
+    const validators = newProps.validators
+
+    if (
+      validators &&
+      (validators.onChangeListenTo || validators.onBlurListenTo)
+    ) {
+      const newValidators = { ...validators }
+
+      const remapListenTo = (listenTo: DeepKeys<any>[] | undefined) => {
+        if (!listenTo) return undefined
+        return listenTo.map((localFieldName) =>
+          this.getFormFieldName(localFieldName),
+        )
+      }
+
+      if (newValidators.onChangeListenTo) {
+        newValidators.onChangeListenTo = remapListenTo(
+          newValidators.onChangeListenTo,
+        )
+      }
+      if (newValidators.onBlurListenTo) {
+        newValidators.onBlurListenTo = remapListenTo(
+          newValidators.onBlurListenTo,
+        )
+      }
+
+      newProps.validators = newValidators
+    }
+
+    return newProps
+  }
 }

packages/form-core/tests/FieldGroupApi.spec.ts

@@ -919,4 +919,79 @@ describe('field group api', () => {
       'complexValue.prop1',
     )
   })
+
+  it('should remap listener paths with its remapFieldProps method', () => {
+    const form = new FormApi({
+      defaultValues: {
+        user: {
+          profile: {
+            personal: {
+              firstName: '',
+              lastName: '',
+              email: '',
+            },
+            preferences: {
+              theme: 'light',
+              notifications: true,
+            },
+          },
+          settings: {
+            privacy: {
+              shareData: false,
+              allowMarketing: true,
+            },
+          },
+        },
+        alternateProfile: {
+          firstName: '',
+          lastName: '',
+          email: '',
+        },
+      },
+    })
+    form.mount()
+
+    const fieldGroupString = new FieldGroupApi({
+      form,
+      fields: 'user.profile.personal',
+      defaultValues: { firstName: '', lastName: '', email: '' },
+    })
+    fieldGroupString.mount()
+
+    const props1 = {
+      validators: {
+        onChangeListenTo: ['firstName'],
+        onBlurListenTo: ['email'],
+      },
+    }
+    const remappedProps1 = fieldGroupString.remapFieldProps(props1)
+    expect(remappedProps1.validators.onChangeListenTo).toEqual([
+      'user.profile.personal.firstName',
+    ])
+    expect(remappedProps1.validators.onBlurListenTo).toEqual([
+      'user.profile.personal.email',
+    ])
+
+    const fieldGroupObject = new FieldGroupApi({
+      form,
+      fields: {
+        firstName: 'alternateProfile.firstName',
+        lastName: 'alternateProfile.lastName',
+        email: 'alternateProfile.email',
+      },
+      defaultValues: { firstName: '', lastName: '', email: '' },
+    })
+    fieldGroupObject.mount()
+
+    const props2 = {
+      validators: {
+        onChangeListenTo: ['firstName', 'lastName'],
+      },
+    }
+    const remappedProps2 = fieldGroupObject.remapFieldProps(props2)
+    expect(remappedProps2.validators.onChangeListenTo).toEqual([
+      'alternateProfile.firstName',
+      'alternateProfile.lastName',
+    ])
+  })
 })

packages/react-form/src/useFieldGroup.tsx

@@ -214,16 +214,17 @@ export function useFieldGroup<
       return (
         <form.AppField
           name={formLensApi.getFormFieldName(name)}
-          {...(appFieldProps as any)}
+          {...formLensApi.remapFieldProps(appFieldProps as any)}
         />
       ) as never
     }
 
     extendedApi.Field = function Field({ name, ...fieldProps }) {
+      console.log({ fieldProps })
       return (
         <form.Field
           name={formLensApi.getFormFieldName(name)}
-          {...(fieldProps as any)}
+          {...formLensApi.remapFieldProps(fieldProps as any)}
         />
       ) as never
     }