Repository navigation
Bug: Nested form elements not firing onSubmit #20741
Description
React version: 17.0.1
Steps To Reproduce
- Create a nested form element with an onsubmit handler
- 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.
Activity
eps1lon commentedon Feb 5, 2021
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 commentedon Feb 5, 2021
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 commentedon Feb 8, 2021
Yep! But it worked in 16 haha
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
onSubmitin react.I would expect if it were following the 'native' behaviour you describe for it to at least call the parent forms
onSubmitgaearon commentedon Feb 8, 2021
^^ I would start the investigation here.
AmirTugi commentedon Feb 24, 2021
I am confirming this to be an issue for me to upgrade to React 17.
Any news on that?
viditrv123 commentedon Apr 16, 2021
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 commentedon Jun 29, 2021
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 usingonSubmitCaptureinstead ofonSubmiton 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 commentedon Jan 9, 2022
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 commentedon Jan 13, 2022
This is still an issue for us (de-staling this issue)
github-actions commentedon Apr 10, 2024
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 commentedon Apr 17, 2024
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!