My submit button also submits another form

I'm using React, I have a form inside of another form:

When a user clicks on a specific button, a dialog shows up, which has the form that I want to be submitted.

My 2 forms have different IDs, but when I submit the form I want (which is in the dialog), the form in the background also submits.

I'm using react-hook-form to manage my forms, if this is also related.

I hope this image can give a little background on the situation:

I tried:

Using different IDs for my forms
Different onSubmit function names
Putting the onSubmit button in the <form> tag that I want to submit
Setting different unique IDs for my submit buttons.

Solution

TL; DR

Use event.stopPropagation() outside React Hook Form handleSubmit:

<form onSubmit={( event ) => {
  // Stop the event propagation OUTSIDE handleSubmit
  event.stopPropagation();
  // Explicitly pass the event
  handleSubmit(submitHandlerFunction)(event);
}}>
  <button type="submit">Submit</button>
</form>

Explanations

React Hook Form handleSubmit fires its submitHandler callback after asynchronous validation, so even if we try to use event.stopPropagation() inside our submitHandlerFunction, it is already too late to prevent the "parent" form from being submitted as well.

You can see that the "parent" form is being submitted before our submitHandlerFunction runs:

function App() {
  const { handleSubmit } = useForm();

  function submitHandlerFunction(data, event) {
    event.stopPropagation(); // Attempt stopping propagation, but it is already too late...
    console.log('submitHandlerFunction called');
  }

  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        console.log('parent form submitted');
      }}
    >
      <h2>Parent form</h2>
      <Dialog>
        <form onSubmit={handleSubmit(submitHandlerFunction)}>
          <h3>Child react-hook-form</h3>
          <ol>
            <li>Calls parent onSubmit</li>
            <li>Calls child submitHandlerFunction</li>
          </ol>
          <button type="submit">Submit child form</button>
        </form>
      </Dialog>
    </form>
  );
}

Live demo: https://stackblitz.com/edit/vitejs-vite-66e51m?file=src%2FApp.jsx

We have to call it outside handleSubmit:

        <form
          onSubmit={(event) => {
            // Stop the event propagation OUTSIDE handleSubmit
            event.stopPropagation();
            // Explicitly pass the event
            handleSubmit(submitHandlerFunction)(event);
          }}
        >
          <h3>Child react-hook-form stop propagation</h3>
          <ol>
            <li>Calls child submitHandlerFunction</li>
          </ol>
          <button type="submit">Submit child form</button>
        </form>

We can also leverage some library to slightly simplify, e.g. browser-event-utils's withStopPropagation():

Calls event.stopPropagation, then passes the event along to your provided event handler function.

        <form
          onSubmit={withStopPropagation(handleSubmit(submitHandlerFunction))}
        >
          <h3>Child react-hook-form withStopPropagation</h3>
          <ol>
            <li>Calls child submitHandlerFunction</li>
          </ol>
          <button type="submit">Submit child form</button>
        </form>

More insights

As mentioned by Code Spirit in the question comments, normally a <form> should not be nested inside another <form>, as per HTML spec:

Note you are not allowed to nest FORM elements!