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

Author: kusiewicz

packages/react-form/src/useFieldGroup.tsx

@@ -4,6 +4,7 @@ import { FieldGroupApi, functionalUpdate } from '@tanstack/form-core'
 import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect'
 import type {
   AnyFieldGroupApi,
+  DeepKeys,
   DeepKeysOfType,
   FieldGroupState,
   FieldsMap,
@@ -194,11 +195,46 @@ export function useFieldGroup<
       return <form.AppForm {...appFormProps} />
     }
 
+    const remapProps = (fieldProps: Record<string, any>) => {
+      const newProps = { ...fieldProps }
+      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) =>
+            formLensApi.getFormFieldName(localFieldName),
+          )
+        }
+
+        if (newValidators.onChangeListenTo) {
+          newValidators.onChangeListenTo = remapListenTo(
+            newValidators.onChangeListenTo,
+          )
+        }
+
+        if (newValidators.onBlurListenTo) {
+          newValidators.onBlurListenTo = remapListenTo(
+            newValidators.onBlurListenTo,
+          )
+        }
+
+        newProps.validators = newValidators
+      }
+
+      return newProps
+    }
+
     extendedApi.AppField = function AppField({ name, ...appFieldProps }) {
       return (
         <form.AppField
           name={formLensApi.getFormFieldName(name)}
-          {...(appFieldProps as any)}
+          {...(remapProps(appFieldProps) as any)}
         />
       ) as never
     }
@@ -207,7 +243,7 @@ export function useFieldGroup<
       return (
         <form.Field
           name={formLensApi.getFormFieldName(name)}
-          {...(fieldProps as any)}
+          {...(remapProps(fieldProps) as any)}
         />
       ) as never
     }