react icon indicating copy to clipboard operation
react copied to clipboard

[react-dom] Respect submitter formMethod in useFormStatus (#33361)

Open developerjhp opened this issue 7 months ago • 0 comments

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 was not respecting this override and continued to return the form's original method.

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 correctly reports the overridden method
  • 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

developerjhp avatar May 31 '25 02:05 developerjhp