fix(react-form): [v2] rerender ArrayField when the array's own errors change

.changeset/loud-arrays-report.md

@@ -0,0 +1,6 @@
+---
+'@tanstack/react-form': patch
+'@tanstack/preact-form': patch
+---
+
+Rerender `ArrayField` when the array's own errors change, so an array-level validator error shows without a change to the array's length.

packages/preact-form/src/PreactForm/fieldSubscriptions.lib.ts

@@ -1,4 +1,4 @@
-import { useSelector } from '@tanstack/preact-store'
+import { shallow, useSelector } from '@tanstack/preact-store'
 import { useMemo } from 'preact/compat'
 import type { AnyInternalFieldApi } from '@tanstack/form-core/internals'
 
@@ -23,10 +23,14 @@ export function useArrayFieldSubscription(
     fieldApi.atom,
     (state) => state.meta._arrayVersion,
   )
+  const errors = useSelector(fieldApi.atom, (state) => state.meta.errors, {
+    compare: shallow,
+  })
 
   return useMemo(() => {
     void length
     void arrayVersion
+    void errors
     return Object.create(fieldApi)
-  }, [fieldApi, arrayVersion, length])
+  }, [fieldApi, arrayVersion, length, errors])
 }

packages/preact-form/tests/FormField.spec.tsx

@@ -345,6 +345,85 @@ describe('Form fields', () => {
     expect(renderCounts.last).toBe(initialCounts.last)
   })
 
+  it('rerenders an ArrayField when its own errors change', async () => {
+    let renders = 0
+
+    function Component() {
+      const form = useForm({
+        defaultValues: { items: [{ label: 'A' }] },
+        errorVisibility: ({ state }) => state.submissionAttempts > 0,
+      })
+
+      return (
+        <>
+          <button onClick={() => form.handleSubmit()}>Submit</button>
+          <form.ArrayField
+            name="items"
+            validators={[
+              {
+                triggers: [],
+                run: ({ value }) =>
+                  value.length < 2 ? 'Add another item' : undefined,
+              },
+            ]}
+          >
+            {(field) => {
+              renders++
+              return (
+                <output data-testid="array">
+                  {field.errors.map((error) => error.message).join(',')}
+                </output>
+              )
+            }}
+          </form.ArrayField>
+          <form.Field
+            name="items[0].label"
+            validators={[
+              {
+                triggers: ['change'],
+                run: async ({ value }) =>
+                  value === 'AB' ? 'Too long' : undefined,
+              },
+            ]}
+          >
+            {(field) => (
+              <>
+                <input
+                  aria-label="label"
+                  value={field.value}
+                  onChange={(event) =>
+                    field.handleChange(event.currentTarget.value)
+                  }
+                />
+                <span data-testid="label-error">
+                  {field.meta.original.errors
+                    .map((error) => error.message)
+                    .join(',')}
+                </span>
+              </>
+            )}
+          </form.Field>
+        </>
+      )
+    }
+
+    const { getByLabelText, getByRole, getByTestId } = render(<Component />)
+    const initialRenders = renders
+
+    await userEvent.type(getByLabelText('label'), 'B')
+
+    await expect
+      .element(getByTestId('label-error'))
+      .toHaveTextContent('Too long')
+    expect(renders).toBe(initialRenders)
+
+    await getByRole('button', { name: 'Submit' }).click()
+
+    await expect
+      .element(getByTestId('array'))
+      .toHaveTextContent('Add another item')
+  })
+
   it('should recreate mounted fields after form reset', async () => {
     function Component() {
       const form = useForm({ defaultValues: { name: 'tony-hawk' } })

packages/react-form/src/ReactForm/fieldSubscriptions.lib.ts

@@ -1,4 +1,4 @@
-import { useSelector } from '@tanstack/react-store'
+import { shallow, useSelector } from '@tanstack/react-store'
 import { useMemo } from 'react'
 import type { AnyInternalFieldApi } from '@tanstack/form-core/internals'
 
@@ -21,10 +21,14 @@ export function useArrayFieldSubscription(
     fieldApi.atom,
     (state) => state.meta._arrayVersion,
   )
+  const errors = useSelector(fieldApi.atom, (state) => state.meta.errors, {
+    compare: shallow,
+  })
 
   return useMemo(() => {
     void length
     void arrayVersion
+    void errors
     return Object.create(fieldApi)
-  }, [fieldApi, arrayVersion, length])
+  }, [fieldApi, arrayVersion, length, errors])
 }

packages/react-form/tests/FormField.spec.tsx

@@ -141,6 +141,83 @@ describe('Form fields', () => {
     expect(renders).toBe(replacementRenders)
   })
 
+  it('rerenders an ArrayField when its own errors change', async () => {
+    let renders = 0
+
+    function Component() {
+      const form = useForm({
+        defaultValues: { items: [{ label: 'A' }] },
+        errorVisibility: ({ state }) => state.submissionAttempts > 0,
+      })
+
+      return (
+        <>
+          <button onClick={() => form.handleSubmit()}>Submit</button>
+          <form.ArrayField
+            name="items"
+            validators={[
+              {
+                triggers: [],
+                run: ({ value }) =>
+                  value.length < 2 ? 'Add another item' : undefined,
+              },
+            ]}
+          >
+            {(field) => {
+              renders++
+              return (
+                <output data-testid="array">
+                  {field.errors.map((error) => error.message).join(',')}
+                </output>
+              )
+            }}
+          </form.ArrayField>
+          <form.Field
+            name="items[0].label"
+            validators={[
+              {
+                triggers: ['change'],
+                run: async ({ value }) =>
+                  value === 'AB' ? 'Too long' : undefined,
+              },
+            ]}
+          >
+            {(field) => (
+              <>
+                <input
+                  aria-label="label"
+                  value={field.value}
+                  onChange={(event) => field.handleChange(event.target.value)}
+                />
+                <span data-testid="label-error">
+                  {field.meta.original.errors
+                    .map((error) => error.message)
+                    .join(',')}
+                </span>
+              </>
+            )}
+          </form.Field>
+        </>
+      )
+    }
+
+    const screen = await render(<Component />)
+    const initialRenders = renders
+
+    await userEvent.type(screen.getByLabelText('label'), 'B')
+
+    await vi.waitFor(() =>
+      expect(screen.getByTestId('label-error')).toHaveTextContent('Too long'),
+    )
+    expect(renders).toBe(initialRenders)
+
+    await screen.getByRole('button', { name: 'Submit' }).click()
+
+    await vi.waitFor(() =>
+      expect(screen.getByTestId('array')).toHaveTextContent('Add another item'),
+    )
+  })
+
   it('should have the correct meta when changing the field', async () => {
     function Component() {
       const form = useForm({ defaultValues: { name: 'tony-hawk' } })