Skip to content

[react-dom] Fix HTML spec violation in useFormStatus: submitter formMethod ignored (#33361) #33387

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

developerjhp
Copy link

@developerjhp developerjhp commented May 31, 2025

Summary

This PR fixes a bug where the formmethod attribute on submit buttons was not properly overriding the parent form's method when accessed through the useFormStatus hook.

Problem:
When a submit button has a formMethod attribute (e.g., <button formMethod="post">), it should override the parent form's method attribute. However, useFormStatus did not reflect this override and continued to return the form’s original method, even though the HTML specification states that formmethod on the submitter should take precedence — with or without formaction.

Reproducible Demo:
You can reproduce the bug with this sandbox:
https://codesandbox.io/p/sandbox/react-dev-forked-ks99yw

This demonstrates that useFormStatus does not reflect the formMethod override from the submit button.

Solution:

  • Extracted the form method resolution logic into a reusable createPendingFormStatus helper function
  • Updated the logic to properly check for formMethod attribute on the submitter element
  • Ensured useFormStatus accurately reflects the overridden formmethod
  • Refactored duplicate code in FormActionEventPlugin for better maintainability

This change aligns React's behavior with the HTML specification for form submissions.

How did you test this change?

Added comprehensive test cases:

  1. Test 1: formMethod on submit button overrides form method in useFormStatus

    • Tests formMethod override when form has no explicit method (uses default)
    • Verifies useFormStatus returns "post" when button has formMethod="post"
  2. Test 2: submitter's formMethod overrides the form method

    • Tests formMethod override when form has explicit method (method="dialog")
    • Verifies useFormStatus returns "post" when button has formMethod="post"

Test execution:

npm test -- --testPathPattern="ReactDOMForm" --passWithNoTests   

Results:

  • ✅ All existing tests pass (45/45)
  • ✅ New formMethod tests pass
  • ✅ No regressions in form submission behavior
  • ✅ useFormStatus correctly reports overridden methods

Manual verification:

  • Tested with various formMethod values (post, get, put, delete)
  • Verified behavior matches HTML specification
  • Confirmed backward compatibility with existing form submissions

Fixes #33361

…3361)

- Extracted createPendingFormStatus helper to build pending form state
- Submit buttons now override the form’s method using their formMethod attribute
- Updated hydration replay logic and regression tests for the new behavior
@developerjhp developerjhp changed the title [react-dom] Respect submitter formMethod in useFormStatus (#33361) [react-dom] Fix useFormStatus not honoring submitter formMethod (#33361) Jun 3, 2025
@developerjhp developerjhp changed the title [react-dom] Fix useFormStatus not honoring submitter formMethod (#33361) [react-dom] Fix HTML spec violation in useFormStatus: submitter formMethod ignored (#33361) Jun 3, 2025
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.

Bug: formMethod specified on the submit button doesn't override the method from useFormStatus.
2 participants