Bug: Incorrect form data when using an image submit button

[jenseng]

React version: canary

Steps To Reproduce

1. Render the following:

   <>
     <form action={(formData) => console.log(new URLSearchParams(formData).toString())}>
       <button name="submitter" value="vanilla">Vanilla</button>
       <input type="image" name="submitter" href="/some/image.png" alt="Image" />
     </form>
   </>

2. Click on the image submit button

Link to code example

The current behavior

submitter= is logged

The expected behavior

Something like submitter.x=5&submitter.y=10 should be logged

When an image submit button is activated, the form data set should include entries for the X and Y coordinates, indicating the relative position where the user clicked. This will keep the behavior consistent with a vanilla form submission (MDN explainer, relevant section of the HTML spec)

Additional commentary

We could probably just simplify all of this code to just const formData = new FormData(form, submitter); ... the submitter parameter is widely available (87.42%); if we're concerned about browsers that don't support it, note that:

1. Many of them also don't support SubmitEvent.submitter, which means the existing approach won't work for them either
2. FormData submitter can easily be polyfilled for developers that care about named submit buttons working correctly in old browsers

IMO React doesn't need to maintain its own hacky partial polyfill for an increasingly diminishing edge case :)

See some previous discussion on the topic here.

[jenseng]

A minor wrinkle in just using the submitter parameter comes on the testing side; jest-environment-jsdom still wants jsdom@^20.0.0, but submitter support in jsdom requires at least 22.1.0. While jest can generally work with a newer pinned jsdom (e.g. see jestjs/jest#13825 (comment)), depending on how tests are using jsdom some changes may be needed (e.g. see remix-run/react-router#10453)

[rakshit389]

<>

console.log(new URLSearchParams(formData).toString())}> Vanilla

Could you specify for which browser this piece of code is not working

[jenseng]

Could you specify for which browser this piece of code is not working

It doesn't work correctly in Chrome or Firefox, because React does not properly populate the the FormData object when the submitter is an Image Button. It "works" in Safari, but that's due to a browser bug.