Skip to content

fix: don't inherit parent Form props in a nested Form - #10746

Merged
yihuiliao merged 2 commits into
adobe:mainfrom
UditDewan:fix/nested-form-context
Oct 12, 2026
Merged

yihuiliao merged 2 commits into
adobe:mainfrom
UditDewan:fix/nested-form-context

Conversation

@UditDewan

Copy link
Copy Markdown
Contributor

Closes #10740

A RAC Form both provides and consumes FormContext via useContextProps, so a Form rendered inside another Form in the React tree (e.g. an independent form in a Modal) merged in the outer form's props: chained onSubmit, duplicated id/className, and inherited validationErrors.

Intent: a nested Form should be independent, while a FormContext provided by the user (not by a Form) should keep working as it does today.

Implementation: following the suggestion in the issue, Form now adds a private symbol to the FormContext value it provides. When a Form sees that marker on the incoming context, it skips merging it (passing slot: null to useContextProps, the existing "don't use context" escape hatch). Fields are unaffected: they only read validationBehavior from FormContext, and still get it from their nearest Form.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices
  • I understand every change in this PR and can explain why it's there.
  • If AI-assisted, I followed our AI contribution guidance and pointed my assistant at AGENTS.md.

📝 Test Instructions:

yarn jest packages/react-aria-components/test/Form.test.js

  • should not inherit props from a parent Form: renders a Form portaled inside another Form and checks the inner form has no inherited id/className, doesn't show the outer form's validation error, and submitting it doesn't call the outer onSubmit. Fails on main, passes with this change.
  • should merge props from FormContext not provided by a Form: a user-provided FormContext.Provider between two forms still applies to the inner form.

Also ran the full RAC and S2 test suites and yarn check-types.

🧢 Your Project:

Personal contribution

@snowystinger snowystinger left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the quick fix!

@yihuiliao yihuiliao left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm, can you sign the CLA? you'll need to close and re-open the PR to run the check

@snowystinger

Copy link
Copy Markdown
Member

@UditDewan UditDewan closed this Oct 11, 2026
@UditDewan UditDewan reopened this Oct 11, 2026
@UditDewan

Copy link
Copy Markdown
Contributor Author

Thanks @yihuiliao and @snowystinger for the reviews and guidance! I signed the CLA and reopened the PR to rerun the checks.

@yihuiliao
yihuiliao added this pull request to the merge queue Oct 12, 2026
Merged via the queue into adobe:main with commit 9ec3996 Oct 12, 2026
30 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A nested Form inherits the outer Form's props

3 participants