fix(react-form): accept extendForm forms in base withFieldGroup components

[dasjideepak]

Closes #2411

🎯 Changes

A form from extendForm could not be passed to a field group made with the base hook's withFieldGroup, even though it only adds components.

Why: FieldComponent, LensFieldComponent and FormGroupComponent marked ExtendedApi (the component map) as in out, so it had to match exactly.

But ExtendedApi is only used in the type of the field passed to children. A form with more components gives children a field with more properties, which is always safe. So out is the right variance.

The fix: in out ExtendedApi → out ExtendedApi in those 3 types.

Test: a new case in createFormHook.test-d.tsx:

• A form from extendForm (extra field and form components) is accepted by a base withFieldGroup group.
• A base form is still accepted.
• The other way round still errors: a base form passed to an extended group is rejected, because it lacks ExtendedField.

Before (main): the new test fails with the error from the issue.

After (this PR): 0 type errors, and TypeScript 5.4 to 5.9 all pass.

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested code changes locally with pnpm test:pr, or these tests do not apply to this pull request.
• I fully understand the code in this pull request, including any code generated with AI assistance.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

• New Features

  • Field groups created with a base hook can now accept forms extended with additional components.

• Bug Fixes

  • Improved type compatibility for fields and field groups, allowing extended forms where appropriate while rejecting forms that lack required extended components.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: TanStack/form/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 25b3521f-94f7-4af5-8f17-810afe5f41e7

📥 Commits

Reviewing files that changed from the base of the PR and between 555509c and 12c0798.

📒 Files selected for processing (4)

• .changeset/wide-fields-extend.md
• packages/react-form/src/useField.tsx
• packages/react-form/src/useFormGroup.tsx
• packages/react-form/tests/createFormHook.test-d.tsx

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

---

📝 Walkthrough

Walkthrough

The change declares ExtendedApi as covariant in field and field-group component types. A type test checks assignments between forms created by a base hook and its extended hook. A patch changeset records the update.

Changes

Form component compatibility

Layer / File(s)	Summary
Component variance and compatibility packages/react-form/src/useField.tsx, packages/react-form/src/useFormGroup.tsx, packages/react-form/tests/createFormHook.test-d.tsx, .changeset/wide-fields-extend.md	FieldComponent, LensFieldComponent, and FormGroupComponent declare ExtendedApi as covariant. The type test checks that a base field group accepts base and extended forms, and that an extended field group rejects a base form without ExtendedField. The changeset records the patch.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to 12c07

This is a type-level change that lets forms from extendForm be passed to base withFieldGroup components. Base forms passed to extended groups are still rejected. No runtime behavior changes, and no merge-blocking risk was found.

Security Architecture Review

Security architecture risk: ⚪ Minimal · up to 12c07

The reviewed change widens compile-time compatibility without changing runtime execution or privileges. The added type test preserves rejection of forms that lack components required by an extended field group. No introduced or worsened security risk was identified in this change.

Retained concerns
No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — The demonstrated exposure change is limited to consumers of the React component type contracts. Matching Preact names are unresolved references and do not establish cross-package propagation or a broader security blast radius.

Trust Boundaries and Controls

• observed — The existing extension signature constrains new component names to avoid collisions with base components. The added negative assignment test preserves the requirement for extended components. These are compile-time compatibility constraints, not runtime authorization controls.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main change: allowing forms from extendForm in base withFieldGroup components.
Description check	✅ Passed	The description follows the required template, explains the motivation and fix, documents the tests, and includes the required changeset checklist.
Linked Issues check	✅ Passed	Issue [#2411] requires an extendForm form to be accepted by a base withFieldGroup when the group uses base components, while the reverse assignment remains rejected. The PR changes ExtendedApi t…
Out of Scope Changes check	✅ Passed	The changeset documents the fix. The source changes implement the variance correction. The type test verifies the requested assignments and rejection case. These changes support issue [#2411], and the…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}