Bug: Nested form elements not firing onSubmit

[zediah]

React version: 17.0.1

Steps To Reproduce

1. Create a nested form element with an onsubmit handler
2. The onSubmit handler will not be called

In the example, click the "Submit child" button and will see the page reload/no console.logs. However, the expected actions occur for both parent and neighbouring forms.

Link to code example:
https://codesandbox.io/s/zen-hoover-6wit3?file=/src/App.js

The current behavior

The attached onSubmit handler on a nested form element is not being called/fired.

The expected behavior

Expect the onsubmit handler to be called.

I'm aware that nesting forms is not valid - but it was working react 16. I'm hoping to not get "you're doing it wrong" responses - but if there is no intention to support this situation the future I would really appreciate an explanation for it :) I've got a bunch of legacy code here that I'd rather not have to go through and refactor and/or not upgrade to react 17.

[eps1lon]

Thanks for the report.

Note that you get a warning about invalid DOM nesting for React 16 and 17.

The current behavior might've been broken in #19333 but I can't speak to whether this was intentional or not and if the new behavior should stay.

With native HTML the child will never be submitted but every submit button inside that form submits the parent: https://codesandbox.io/s/boring-goldwasser-67fsv?file=/public/index.html

@gaearon What do you think about the new behavior compared to "native" behavior?

[gaearon]

I haven't looked into why this is happening, seems unintuitive to me. I've noticed that when I click on the inner form, React only receives the captured event, but not the bubbled one. Any ideas why?

[zediah]

Note that you get a warning about invalid DOM nesting for React 16 and 17.

Yep! But it worked in 16 haha

With native HTML the child will never be submitted but every submit button inside that form submits the parent:

Makes sense to go with the native behaviour but in this case it's not even doing that. It's just flat out submitting A form (not sure which) without triggering either the child or the parent forms onSubmit in react.

I would expect if it were following the 'native' behaviour you describe for it to at least call the parent forms onSubmit

[gaearon]

I've noticed that when I click on the inner form, React only receives the captured event, but not the bubbled one. Any ideas why?

^^ I would start the investigation here.

[AmirTugi]

I am confirming this to be an issue for me to upgrade to React 17.
Any news on that?

[viditrv123]

1. Firstly it doesn't seem to be valid to do nesting of the form element.
2. Still if we want to call an event due to some reason or the other , we may use onClick event of the button and get our things done.

import "./styles.css"; import React from "react"; export default function App() { return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <form> <input type="text" /> <button type="submit" onClick={(e) => { e.preventDefault(); console.log("parent form submitted"); }} > Submit </button> <form> <button type="submit" onClick={(e) => { e.preventDefault(); console.log("child form submitted"); }} > Submit child </button> </form> </form> <form> <button type="submit" onClick={(e) => { e.preventDefault(); console.log("second form submitted"); }} > Submit second </button> </form> </div> ); }

In the above example onClick event still occurs even after the nesting of the form element.

CodeSanbox of the above code

[henryqdineen]

We ran into this issue while upgrading a fairly large codebase to React 17. I understand that <form/> elements shouldn't be nested but would using onSubmitCapture instead of onSubmit on the <form/> element be a valid workaround for this? Would it behave exactly like React 16 or is there any caveat to watch out for? Thanks!

[stale]

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!

[simonv3]

This is still an issue for us (de-staling this issue)

[github-actions]

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]

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!