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.