Skip to content
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

Bug: Incorrect form data when using an image submit button #29018

Open
jenseng opened this issue May 8, 2024 · 3 comments · May be fixed by #29028
Open

Bug: Incorrect form data when using an image submit button #29018

jenseng opened this issue May 8, 2024 · 3 comments · May be fixed by #29028
Assignees

Comments

@jenseng
Copy link
Contributor

jenseng commented May 8, 2024

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 jenseng added the Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug label May 8, 2024
@jenseng
Copy link
Contributor Author

jenseng commented May 8, 2024

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)

jenseng added a commit to jenseng/react that referenced this issue May 8, 2024
This brings:
 - jest* up from 29.4.2 -> 29.7.0
 - jsdom up from 20.0.0 -> 22.1.0

While the latest version of jest-dom-environment still wants `jsdom@^20.0.0`,
it can safely use at least up to `[email protected]`. See jestjs/jest#13825 (comment)
for details.

Upgrading to latest versions lets us improve some WheelEvent tests and will
make it possible to test a much simpler FormData construction approach (see facebook#29018)
kassens pushed a commit that referenced this issue May 8, 2024
## Summary

This brings:
 - jest* up from 29.4.2 -> 29.7.0
 - jsdom up from 20.0.0 -> 22.1.0

While the latest version of jest-dom-environment still wants
`jsdom@^20.0.0`, it can safely use at least up to `[email protected]`. See
jestjs/jest#13825 (comment) for
details.

Upgrading to latest versions lets us improve some WheelEvent tests and
will make it possible to test a much simpler FormData construction
approach (see #29018)

## How did you test this change?

Ran `yarn test` and `yarn test --prod` successfully
@kassens kassens added React 19 and removed Status: Unconfirmed A potential issue that we haven't yet confirmed as a bug labels May 8, 2024
@jenseng jenseng linked a pull request May 8, 2024 that will close this issue
@rakshit389
Copy link

<>

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

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

@jenseng
Copy link
Contributor Author

jenseng commented May 15, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants