Fix #44: Reset field state at insertion index in insert/unshift (#103)

* Fix #44: Reset field state at insertion index in insert/unshift

Fixes #44 (implements solution from PR #96)

## Problem
When insert() or unshift() is called on an array field, React reuses
the component at the insertion index because the 'name' prop stays the
same. This causes stale data to appear and field updates to fail.

Example: If foo[0] and foo[1] exist, and you unshift a new item:
- Values correctly become: [NEW, old-foo[0], old-foo[1]]
- But field state for foo[0] still has old-foo[0]'s data
- React doesn't remount the component, so registerField doesn't fire
- Result: foo[0] shows old data and doesn't respond to changes

## Solution
When shifting fields at index >= insertionIndex:
1. Copy field state to the incremented position (foo[0] → foo[1])
2. Keep the original field at the insertion index (foo[0])
3. Reset that field to default state via resetFieldState()

This ensures the field at the insertion index has fresh state, forcing
React to recognize it as a new field when the component re-renders.

## Tests
- Updated insert.test.ts to expect field at insertion index
- Updated unshift.test.ts to expect field at insertion index
- Added unshift.regression-44.test.ts with regression tests

All 68 tests passing ✅

Credit: Solution from @Elecweb's PR #96

* Add regression test for #47 (submitErrors removal)

Verifies that PR #48's fix continues to work correctly.
Test confirms submitErrors are properly removed when array items
are removed via fields.remove().

---------

Co-authored-by: Erik Rasmussen <erik@mini.local>

Author: erikras-richard-agent

src/insert.test.ts

@@ -149,6 +149,11 @@ describe('insert', () => {
           touched: true,
           error: 'A Error'
         } as any,
+        'foo[1]': {
+          name: 'foo[1]',
+          touched: false,
+          error: 'B Error'
+        } as any,
         'foo[2]': {
           name: 'foo[2]',
           touched: true,
@@ -226,6 +231,11 @@ describe('insert', () => {
           touched: true,
           error: 'A Error'
         } as any,
+        'foo[0][1]': {
+          name: 'foo[0][1]',
+          touched: false,
+          error: 'B Error'
+        } as any,
         'foo[0][2]': {
           name: 'foo[0][2]',
           touched: true,

src/insert.ts

@@ -5,7 +5,7 @@ import { escapeRegexTokens } from './utils'
 const insert: Mutator<any> = (
   [name, index, value]: any[],
   state: MutableState<any>,
-  { changeValue }: Tools<any>
+  { changeValue, resetFieldState }: Tools<any>
 ): void => {
   changeValue(state, name, (array?: any[]): any[] => {
     const copy = [...(array || [])]
@@ -24,6 +24,11 @@ const insert: Mutator<any> = (
         // Shift all higher indices up
         const incrementedKey = `${name}[${fieldIndex + 1}]${tokens[2]}`
         copyField(state.fields, key, newFields, incrementedKey)
+        if (fieldIndex === index) {
+          // Keep field at insertion index and reset to defaults
+          newFields[key] = state.fields[key]
+          resetFieldState(key)
+        }
         return
       }
     }

src/remove.submiterrors-47.test.ts

@@ -0,0 +1,111 @@
+import remove from './remove'
+import { getIn, setIn, MutableState } from 'final-form'
+import { createMockTools } from './testUtils'
+
+describe('remove submitErrors regression #47', () => {
+  it('should remove submitErrors when removing array item', () => {
+    const changeValue = jest.fn((state: any, name: string, mutate: (value: any) => any) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {} as any
+    })
+
+    const state: MutableState<any> = {
+      formState: {
+        values: {
+          customers: [
+            { name: 'Alice' },
+            { name: 'Bob' },
+            { name: 'Charlie' }
+          ]
+        } as any,
+        submitErrors: {
+          customers: [
+            { name: 'Error for Alice' },
+            { name: 'Error for Bob' },
+            { name: 'Error for Charlie' }
+          ]
+        }
+      },
+      fields: {
+        'customers[0]': { name: 'customers[0]' } as any,
+        'customers[0].name': { name: 'customers[0].name' } as any,
+        'customers[1]': { name: 'customers[1]' } as any,
+        'customers[1].name': { name: 'customers[1].name' } as any,
+        'customers[2]': { name: 'customers[2]' } as any,
+        'customers[2].name': { name: 'customers[2].name' } as any
+      }
+    }
+
+    // Remove middle item (index 1 - Bob)
+    remove(['customers', 1], state, createMockTools({ changeValue, getIn, setIn }))
+
+    // Values should have Bob removed
+    expect(state.formState.values.customers).toHaveLength(2)
+    expect(state.formState.values.customers[0].name).toBe('Alice')
+    expect(state.formState.values.customers[1].name).toBe('Charlie')
+
+    // Submit errors should also have Bob's error removed
+    expect(state.formState.submitErrors.customers).toHaveLength(2)
+    expect(state.formState.submitErrors.customers[0].name).toBe('Error for Alice')
+    expect(state.formState.submitErrors.customers[1].name).toBe('Error for Charlie')
+  })
+
+  it('should handle removing first item with submitErrors', () => {
+    const changeValue = jest.fn((state: any, name: string, mutate: (value: any) => any) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {} as any
+    })
+
+    const state: MutableState<any> = {
+      formState: {
+        values: {
+          items: ['A', 'B', 'C']
+        } as any,
+        submitErrors: {
+          items: ['Error A', 'Error B', 'Error C']
+        }
+      },
+      fields: {
+        'items[0]': { name: 'items[0]' } as any,
+        'items[1]': { name: 'items[1]' } as any,
+        'items[2]': { name: 'items[2]' } as any
+      }
+    }
+
+    // Remove first item
+    remove(['items', 0], state, createMockTools({ changeValue, getIn, setIn }))
+
+    expect(state.formState.values.items).toEqual(['B', 'C'])
+    expect(state.formState.submitErrors.items).toEqual(['Error B', 'Error C'])
+  })
+
+  it('should not crash when no submitErrors exist', () => {
+    const changeValue = jest.fn((state: any, name: string, mutate: (value: any) => any) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {} as any
+    })
+
+    const state: MutableState<any> = {
+      formState: {
+        values: {
+          items: ['A', 'B']
+        } as any
+        // No submitErrors
+      },
+      fields: {
+        'items[0]': { name: 'items[0]' } as any,
+        'items[1]': { name: 'items[1]' } as any
+      }
+    }
+
+    // Should not crash
+    expect(() => {
+      remove(['items', 0], state, createMockTools({ changeValue, getIn, setIn }))
+    }).not.toThrow()
+
+    expect(state.formState.values.items).toEqual(['B'])
+  })
+})

src/unshift.regression-44.test.ts

@@ -0,0 +1,71 @@
+import unshift from './unshift'
+import { getIn, setIn, MutableState } from 'final-form'
+import { createMockTools } from './testUtils'
+
+describe('unshift regression #44', () => {
+  it('should properly initialize unshifted field values', () => {
+    const changeValue = jest.fn((state: any, name: string, mutate: (value: any) => any) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {} as any
+    })
+
+    // Start with one customer
+    const state: MutableState<any> = {
+      formState: {
+        values: {
+          customers: [{ firstName: 'John', lastName: 'Doe' }]
+        } as any
+      },
+      fields: {
+        'customers[0]': { name: 'customers[0]' } as any,
+        'customers[0].firstName': { name: 'customers[0].firstName' } as any,
+        'customers[0].lastName': { name: 'customers[0].lastName' } as any
+      }
+    }
+
+    // Unshift a new customer
+    unshift(['customers', { firstName: 'Jane', lastName: 'Smith' }], state, createMockTools({ changeValue }))
+
+    const customers = state.formState.values.customers
+
+    // Verify new customer is at index 0
+    expect(customers).toHaveLength(2)
+    expect(customers[0]).toEqual({ firstName: 'Jane', lastName: 'Smith' })
+    expect(customers[1]).toEqual({ firstName: 'John', lastName: 'Doe' })
+
+    // Verify field keys were shifted
+    expect(state.fields['customers[0]']).toBeDefined()
+    expect(state.fields['customers[1]']).toBeDefined()
+    expect(state.fields['customers[0].firstName']).toBeDefined()
+    expect(state.fields['customers[0].lastName']).toBeDefined()
+    expect(state.fields['customers[1].firstName']).toBeDefined()
+    expect(state.fields['customers[1].lastName']).toBeDefined()
+  })
+
+  it('should not have null values after unshift', () => {
+    const changeValue = jest.fn((state: any, name: string, mutate: (value: any) => any) => {
+      const before = getIn(state.formState.values, name)
+      const after = mutate(before)
+      state.formState.values = setIn(state.formState.values, name, after) || {} as any
+    })
+
+    const state: MutableState<any> = {
+      formState: {
+        values: {
+          items: ['first']
+        } as any
+      },
+      fields: {
+        'items[0]': { name: 'items[0]' } as any
+      }
+    }
+
+    // Unshift should add the value, not null
+    unshift(['items', 'prepended'], state, createMockTools({ changeValue }))
+
+    expect(state.formState.values.items[0]).toBe('prepended')
+    expect(state.formState.values.items[0]).not.toBeNull()
+    expect(state.formState.values.items[1]).toBe('first')
+  })
+})

src/unshift.test.ts

@@ -113,6 +113,11 @@ describe('unshift', () => {
         }
       },
       fields: {
+        'foo[0]': {
+          name: 'foo[0]',
+          touched: false,
+          error: 'A Error'
+        } as any,
         'foo[1]': {
           name: 'foo[1]',
           touched: true,