add baseStore to fieldApi

Author: LeCarbonator

packages/form-core/src/FieldApi.ts

@@ -1,4 +1,4 @@
-import { Derived, batch } from '@tanstack/store'
+import { Derived, Store, batch } from '@tanstack/store'
 import {
   isStandardSchemaValidator,
   standardSchemaValidators,
@@ -864,6 +864,10 @@ export type AnyFieldMeta = FieldMeta<
   any
 >
 
+export type FieldBaseState<TParentData, TName extends DeepKeys<TParentData>> = {
+  name: TName
+}
+
 /**
  * An object type representing the state of a field.
  */
@@ -1052,7 +1056,9 @@ export class FieldApi<
   /**
    * The field name.
    */
-  name!: DeepKeys<TParentData>
+  get name(): DeepKeys<TParentData> {
+    return this.baseStore.state.name
+  }
   /**
    * The field options.
    */
@@ -1081,6 +1087,8 @@ export class FieldApi<
     TFormOnServer,
     TParentSubmitMeta
   > = {} as any
+
+  baseStore: Store<FieldBaseState<TParentData, TName>>
   /**
    * The field state store.
    */
@@ -1152,15 +1160,17 @@ export class FieldApi<
     >,
   ) {
     this.form = opts.form as never
-    this.name = opts.name as never
+    this.baseStore = new Store({
+      name: opts.name,
+    })
     this.timeoutIds = {
       validations: {} as Record<ValidationCause, never>,
       listeners: {} as Record<ListenerCause, never>,
       formListeners: {} as Record<ListenerCause, never>,
     }
 
     this.store = new Derived({
-      deps: [this.form.store],
+      deps: [this.baseStore, this.form.store],
       fn: () => {
         const value = this.form.getFieldValue(this.name)
         const meta = this.form.getFieldMeta(this.name) ?? {
@@ -1312,7 +1322,9 @@ export class FieldApi<
     this.options = opts as never
 
     const nameHasChanged = this.name !== opts.name
-    this.name = opts.name
+    if (nameHasChanged) {
+      this.baseStore.setState((prev) => ({ ...prev, name: opts.name }))
+    }
 
     // Default Value
     if ((this.state.value as unknown) === undefined) {

packages/react-form/src/useField.tsx

@@ -219,6 +219,11 @@ export function useField<
     return extendedApi
   })
 
+  const nameHasChanged = fieldApi.name !== opts.name
+  if (nameHasChanged) {
+    fieldApi.baseStore.setState((prev) => ({ ...prev, name: opts.name }))
+  }
+
   useIsomorphicLayoutEffect(fieldApi.mount, [fieldApi])
 
   /**

packages/react-form/tests/useForm.test.tsx

@@ -896,4 +896,48 @@ describe('useForm', () => {
     await user.click(target)
     expect(result).toHaveTextContent('1')
   })
+
+  it('should allow custom component keys for arrays', async () => {
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          foo: [
+            { name: 'nameA', id: 'a' },
+            { name: 'nameB', id: 'b' },
+            { name: 'nameC', id: 'c' },
+          ],
+        },
+      })
+
+      return (
+        <>
+          <form.Field name="foo" mode="array">
+            {(arrayField) =>
+              arrayField.state.value.map((row, i) => (
+                <form.Field key={row.id} name={`foo[${i}].name`}>
+                  {(field) => {
+                    expect(field.name).toBe(`foo[${i}].name`)
+                    expect(field.state.value).not.toBeUndefined()
+                    return null
+                  }}
+                </form.Field>
+              ))
+            }
+          </form.Field>
+          <button
+            type="button"
+            onClick={() => form.removeFieldValue('foo', 1)}
+            data-testid="removeField"
+          >
+            Remove
+          </button>
+        </>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+
+    const target = getByTestId('removeField')
+    await user.click(target)
+  })
 })