fix(react-form): default selector to identity in Subscribe component (#2065)

* fix(react-form): default selector to identity in Subscribe component

When <form.Subscribe> is rendered without a selector prop, it crashes
at runtime because useStore receives undefined as the selector:

  TypeError: selector is not a function

The types already mark selector as optional, so the runtime behavior
should match. This adds a default identity function ((state) => state)
for the selector parameter in both LocalSubscribe implementations
(useForm and useFieldGroup).

Fixes #2063

* test: add coverage for Subscribe default selector

* ci: apply automated fixes and generate docs

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: isaackaara

packages/react-form/src/useFieldGroup.tsx

@@ -23,11 +23,11 @@ import type { LensFieldComponent } from './useField'
 
 function LocalSubscribe({
   lens,
-  selector,
+  selector = (state) => state,
   children,
 }: PropsWithChildren<{
   lens: AnyFieldGroupApi
-  selector: (state: FieldGroupState<any>) => FieldGroupState<any>
+  selector?: (state: FieldGroupState<any>) => FieldGroupState<any>
 }>): ReturnType<FunctionComponent> {
   const data = useStore(lens.store, selector)
 

packages/react-form/src/useForm.tsx

@@ -139,11 +139,11 @@ export type ReactFormExtendedApi<
 
 function LocalSubscribe({
   form,
-  selector,
+  selector = (state) => state,
   children,
 }: PropsWithChildren<{
   form: AnyFormApi
-  selector: (state: AnyFormState) => AnyFormState
+  selector?: (state: AnyFormState) => AnyFormState
 }>): ReturnType<FunctionComponent> {
   const data = useStore(form.store, selector)
 

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { render } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import { formOptions } from '@tanstack/form-core'
 import userEvent from '@testing-library/user-event'
 import { createFormHook, createFormHookContexts, useStore } from '../src'
@@ -699,4 +699,63 @@ describe('createFormHook', () => {
     const button = getByText('Testing')
     expect(button).toBeInTheDocument()
   })
+
+  it('should render FieldGroup Subscribe without selector (default identity)', async () => {
+    const formOpts = formOptions({
+      defaultValues: {
+        person: {
+          firstName: 'FirstName',
+          lastName: 'LastName',
+        },
+      },
+    })
+
+    const ChildFormAsField = withFieldGroup({
+      defaultValues: formOpts.defaultValues.person,
+      render: ({ group }) => {
+        return (
+          <div>
+            <group.Field
+              name="lastName"
+              children={(field) => (
+                <label>
+                  Last Name:
+                  <input
+                    data-testid="lastName"
+                    value={field.state.value}
+                    onBlur={field.handleBlur}
+                    onChange={(e) => field.handleChange(e.target.value)}
+                  />
+                </label>
+              )}
+            />
+            <group.Subscribe
+              children={(state) => (
+                <span data-testid="state-lastName">
+                  {state.values.lastName}
+                </span>
+              )}
+            />
+          </div>
+        )
+      },
+    })
+
+    const Parent = () => {
+      const form = useAppForm({
+        ...formOpts,
+      })
+      return <ChildFormAsField form={form} fields="person" />
+    }
+
+    const { getByTestId } = render(<Parent />)
+    const input = getByTestId('lastName')
+    const stateLastName = getByTestId('state-lastName')
+
+    expect(stateLastName).toHaveTextContent('LastName')
+
+    await user.clear(input)
+    await user.type(input, 'Updated')
+    await waitFor(() => expect(stateLastName).toHaveTextContent('Updated'))
+  })
 })

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

@@ -1075,4 +1075,45 @@ describe('useForm', () => {
     await user.click(getByText('Rerender'))
     await findByText('Another')
   })
+
+  it('should render Subscribe without selector (default identity)', async () => {
+    function Comp() {
+      const form = useForm({
+        defaultValues: {
+          name: 'test',
+        },
+      })
+
+      return (
+        <>
+          <form.Field
+            name="name"
+            children={(field) => (
+              <input
+                data-testid="input"
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+              />
+            )}
+          />
+
+          <form.Subscribe
+            children={(state) => (
+              <span data-testid="state-value">{state.values.name}</span>
+            )}
+          />
+        </>
+      )
+    }
+
+    const { getByTestId } = render(<Comp />)
+    const input = getByTestId('input')
+    const stateValue = getByTestId('state-value')
+
+    expect(stateValue).toHaveTextContent('test')
+
+    await user.clear(input)
+    await user.type(input, 'updated')
+    await waitFor(() => expect(stateValue).toHaveTextContent('updated'))
+  })
 })