React version: canary
Steps To Reproduce
- 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>
</>
- 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 (91.52%); if we're concerned about browsers that don't support it, note that:
- Many of them also don't support
SubmitEvent.submitter, which means the existing approach won't work for them either
- 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.
React version: canary
Steps To Reproduce
Link to code example
The current behavior
submitter=is loggedThe expected behavior
Something like
submitter.x=5&submitter.y=10should be loggedWhen 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 (91.52%); if we're concerned about browsers that don't support it, note that:SubmitEvent.submitter, which means the existing approach won't work for them eitherIMO 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.