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

ReactDOM: Fix missing form data when the submitter is outside the form #28056

Conversation

jupapios
Copy link
Contributor

@jupapios jupapios commented Jan 23, 2024

Summary

Fixes #27391

Fix form actions to include the name and value from the form-associated element when it is located outside the form.

How did you test this change?

  • Existing test has been modified to include the case from the issue.
  • Manually tested running Next.js locally, linked to a local build of react-dom.
Screenshot 2024-01-22 at 8 45 20 PM
  • Created codesandbox
Screenshot 2024-05-01 at 4 09 12 PM Screenshot 2024-05-01 at 4 08 40 PM

@react-sizebot
Copy link

react-sizebot commented Jan 23, 2024

Comparing: 190cc99...0b4abb2

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name +/- Base Current +/- gzip Base gzip Current gzip
oss-stable/react-dom/cjs/react-dom.production.js = 6.66 kB 6.66 kB = 1.82 kB 1.82 kB
oss-experimental/react-dom/cjs/react-dom.production.js = 6.67 kB 6.67 kB = 1.83 kB 1.83 kB
facebook-www/ReactDOM-prod.classic.js +0.02% 591.11 kB 591.22 kB +0.02% 103.94 kB 103.96 kB
facebook-www/ReactDOM-prod.modern.js +0.02% 567.33 kB 567.44 kB +0.02% 100.34 kB 100.36 kB
test_utils/ReactAllWarnings.js Deleted 64.26 kB 0.00 kB Deleted 16.02 kB 0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show
Name +/- Base Current +/- gzip Base gzip Current gzip
test_utils/ReactAllWarnings.js Deleted 64.26 kB 0.00 kB Deleted 16.02 kB 0.00 kB

Generated by 🚫 dangerJS against 0b4abb2

@jupapios jupapios changed the title Fix missing form data when the submitter is outside the form ReactDOM: Fix missing form data when the submitter is outside the form Jan 24, 2024
Copy link

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

@github-actions github-actions bot added the Resolution: Stale Automatically closed due to inactivity label Apr 23, 2024
@jupapios
Copy link
Contributor Author

bump

@github-actions github-actions bot removed the Resolution: Stale Automatically closed due to inactivity label Apr 23, 2024
@@ -92,6 +92,10 @@ function extractEvents(
const temp = submitter.ownerDocument.createElement('input');
temp.name = submitter.name;
temp.value = submitter.value;
const isOutsideForm = !form.contains(submitter);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How expensive is this call? Could we just always set the form attribute if form has an ID? Checking if a form has an id seems cheaper to me.

@eps1lon
Copy link
Collaborator

eps1lon commented Apr 23, 2024

Can you prepare a codesandbox using a build from this branch (https://react-builds.vercel.app/api/prs/28056/packages-react-dom) to verify this works in a browser? Our
testing environment (JSDOM) is fairly unreliable in this area.

Fixes facebook#27391

`form-associated elements` can be associated with `<form>`s anywhere in the document (even if the element is outside the `<form>`), and as with any submitter, the `name` and `value` are expected to be reflected in the final `FormData`.
@jupapios jupapios force-pushed the jupapios/react-dom-support-form-data-submitter-from-outside branch from 1933c2c to 0b4abb2 Compare May 1, 2024 20:38
@jupapios
Copy link
Contributor Author

jupapios commented May 1, 2024

Can you prepare a codesandbox using a build from this branch (https://react-builds.vercel.app/api/prs/28056/packages-react-dom) to verify this works in a browser? Our testing environment (JSDOM) is fairly unreliable in this area.

@eps1lon you were right! it was simpler to check for the id of the form, I just updated the PR and created two sandboxes, both with the same code just different builds.

Copy link
Collaborator

@eps1lon eps1lon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thank you! Form reset also works properly: https://codesandbox.io/p/sandbox/kind-butterfly-2knmgm

@eps1lon eps1lon merged commit 29d3c83 into facebook:main May 2, 2024
38 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Bug: missing button data in form when submitted via formAction
4 participants