-
Notifications
You must be signed in to change notification settings - Fork 47.2k
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: missing button data in form when submitted via formAction
#27391
Comments
Standard HTML forms provide the name and value of the button that submitted the form even if the button is outside the form tag: https://codesandbox.io/p/sandbox/practical-smoke-h6s2wp?file=%2Fapp.js%3A11%2C24 |
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This comment was marked as off-topic.
This also seems to be a problem when using Code example comparing a "default" submit button (which does surface the button's form data properly) and a button with the |
formAction
Code pointer for debugging – it's meant to be added here: react/packages/react-dom-bindings/src/events/plugins/FormActionEventPlugin.js Lines 83 to 97 in e3748a0
|
@mattcarrollcode I have faced this similar issue when building forms with the button outside the Maybe have a deeper look on the code pointed by @sophiebits would give more clarity. |
This comment was marked as off-topic.
This comment was marked as off-topic.
Fixes facebook#27391 `form-associated elements` can have a form owner, the associated form can be anywhere in the document.
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 just like regular submitters, their name and value are expected to be reflected in the final `FormData`.
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`.
I just created a PR that should fix the original issue, @mattcarrollcode regarding the second issue, it seems there is a test that expects such behavior, so I guess that, for now, it is expected, but I might be wrong, @sophiebits can you confirm, please? 🙏 |
This is an auto-reply email.Hi, due to the high volume of emails, I will get back to you as soon as possible within three days.
|
This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment! |
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`.
When a form action is triggered by a button that is outside the form's tag the button's
name
andvalue
is missing from the form data provided to the action. When the button submitting the form is inside the form tag the button's form data is properly surfaced to the action:React version: 0.0.0-experimental-2807d781a-20230918
Steps To Reproduce
name
andvalue
attributes set with non-null values. The action should take aformData
argument and log the button's value:Link to code example: https://codesandbox.io/s/flamboyant-meadow-gcvpx9?file=/App.js
The current behavior
The
formData
provided to the form action doesn't contain the key-value pair information of the button that submitted the form when the button is outside the form's tag. This means that nothing is logged because then1
key doesn't exist informData
The expected behavior
The value of the external button to be logged (
v1
in the example above) becauseformData
includes theThe text was updated successfully, but these errors were encountered: