fix(react-form): fallback array field value during index change to prevent uncontrolled error

packages/form-core/src/FieldApi.ts

@@ -993,11 +993,16 @@ export class FieldApi<
     this.form = opts.form as never
     this.name = opts.name as never
     this.timeoutIds = {} as Record<ValidationCause, never>
+    // Only really relevant for arrays, the value could be gone once Derived's update fn is triggered
+    const potentialPreviousValue = this.form.getFieldValue(this.name)
 
     this.store = new Derived({
       deps: [this.form.store],
       fn: () => {
-        const value = this.form.getFieldValue(this.name)
+        let value = this.form.getFieldValue(this.name)
+        if (value === undefined && potentialPreviousValue !== undefined) {
+          value = potentialPreviousValue
+        }
         const meta = this.form.getFieldMeta(this.name) ?? {
           ...defaultFieldMeta,
           ...opts.defaultMeta,

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

@@ -1165,6 +1165,77 @@ describe('useField', () => {
     expect(queryByText(fakePeople.molly.name)).not.toBeInTheDocument()
   })
 
+  it('should not make field uncontrolled during array item removal', async () => {
+    // Spy on console.error before rendering
+    const consoleErrorSpy = vi.spyOn(console, 'error')
+
+    let id = 0
+
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          people: [] as { id: number; name: string }[],
+        },
+      })
+
+      return (
+        <form>
+          <form.Field name="people" mode="array">
+            {(people) => (
+              <div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    people.pushValue({
+                      id: id,
+                      name: `${id++}`,
+                    })
+                  }}
+                  data-testid="add"
+                >
+                  Add
+                </button>
+                {people.state.value.map((person, i) => (
+                  <form.Field name={`people[${i}].name`} key={person.id}>
+                    {(field) => {
+                      return (
+                        <div>
+                          <input
+                            type="text"
+                            value={field.state.value}
+                            onChange={(e) => {
+                              field.handleChange(e.target.value)
+                            }}
+                          />
+                          <button
+                            type="button"
+                            data-testid={`remove-${person.id}`}
+                            onClick={() => {
+                              people.removeValue(i)
+                            }}
+                          >
+                            Remove
+                          </button>
+                        </div>
+                      )
+                    }}
+                  </form.Field>
+                ))}
+              </div>
+            )}
+          </form.Field>
+        </form>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    await user.click(getByTestId('add'))
+    await user.click(getByTestId('add'))
+    await user.click(getByTestId('remove-0'))
+    // Making a controlled field uncontrolled will log an error
+    expect(consoleErrorSpy).not.toHaveBeenCalled()
+  })
+
   it('should not rerender unrelated fields', async () => {
     const renderCount = {
       field1: 0,