Bug: Pressing `enter` on an input to submit the form submits the first button instead of the form itself (With Actions)

[arnu515]

React version: 18.3.0-canary-6db7f4209-20231021 in the sandbox, also works on 18.2.0

Steps To Reproduce

1. Create a form with one input and two buttons.
2. Add an action to the form, and a different action to the first of the two buttons. Make sure they do something different (like give out different alerts).
3. Write something in the input and press enter.
4. The first button's action (which was different from the form's main action) will be called, instead of the forms action being called.
5. Alternatively, look at the sandbox below.

Link to code example: https://codesandbox.io/p/sandbox/romantic-night-dsnkwm

This sandbox was forked from a sandbox that was directly in the documentation. It was changed to make the textarea an input.

The current behavior

When typing something into the input and pressing enter to submit the form, the first button's submit handler gets called, which runs the formAction of the button (if present, otherwise it runs the action of the form). You can test this out by using the two forms in the sandbox. The first one has the button without a separate action placed first in the DOM, and the second has the one with the separate action placed first in the DOM.

The expected behavior

When pressing enter on the input, it should run the action of the form itself, and not of some button. There will be no way to run the correct action without putting a button without an action first in line, but this is unintuitive.

Suggestions

Please make it so that when enter is pressed on any input in the form, it runs the form's main action, or maybe there can be support added for the input to have its own formAction without it being a type='submit' input, and that action gets called when the form is submitted.

Temporary fix

The temporary fix is to add a button with display: none and type="submit" before any button with a custom action. This ensures that the main form's action is run.

Thank you.

[sandeep36butte]

The formaction attribute added to any child elements within the form element will override the form action attribute. This is the default behaviour.

[arnu515]

Yes, but the action added on any child elements should be called only if the child itself submits the form, not when the form is submitted by some other way, since it defeats the purpose of adding an action on the form itself.

[sandeep36butte]

Probably not a react issue. By default the formation attribute will override the form action attribute and all the event listeners associated with the form action method.

please check the mdn docs for the form elements.

[QuinVon]

No `input` appeared to me rather than a `textarea`

[arnu515]

@QuinVon Sorry, I put the wrong sandbox link in the original issue. I've fixed it now, please use this link.

[github-actions[bot]]

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!

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!