Form + form inside a modal dialog

[Falci]

Hey, I have a form with quite some fields. One of them is too complex so I want to place it inside a modal.
The user sees a disabled input with an "edit" next to it. Once clicked it opens a modal dialog with another form inside.

On the submit of this second form, if everything is fine, I close the dialog and pass the value to the parent form.

Technically, they are not parent and child, because react-bootstrap puts the modal in the of the content, near </body>

The problem is: once we submit the modal form, it triggers the onSubmit for both.
I tried to add an id to the form and a form to the submit button, no success.
Tried to move the modal's form deeper in the modal's body, same.

I don't know if the form is triggered by RHF or by hmtl's native behaviour

Maybe related to #8889 .

Demo

[Moshyfawn]

Yea, #8889 is the same question. Haven't had the time to answer yet

[chetvishal]

Hey @Falci I think this is happening because you placed your Modal component inside parent form tag so when submit event is triggered in modal component , as it is inside other form tag submit event event spawns on that form too, so it is bubbling up to its parent form so that's causing the parent form to trigger onform submit function.

Link

[leapful]

@Falci @Moshyfawn @chetvishal

UI library "react-bootstrap in the example uses React Portal to show modal form by appending the modal to the default container "document.body".

According to React Portal documentation (https://reactjs.org/docs/portals.html#event-bubbling-through-portals):

Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the React tree regardless of position in the DOM tree.

This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing React tree, even if those elements are not ancestors in the DOM tree.

Add event stop propagation for onSubmit of modal form or moving modal form outside root form will solve the issue.

Moving modal form: https://codesandbox.io/s/react-hook-form-example-forked-nznlzm?file=/src/index.js

[russ0133]

I tried adding e.stopPropagation but still nothing... Anyone had any success with the stopPropagation method?

I have a form that has inside a "contacts" field, and a button that opens another form to "open a contact". Both forms are sharing their own context :/