Why form submission inside a modal causes another form validation?

[moroshko]

I have 2 forms that are not nested, they live in sibling elements, one of them is inside a modal.
When the form inside the modal is submitted, for some reason the other form is submitted as well (triggering its validation) - this is a very unexpected and unwanted behavior.

See: CodeSandbox

To reproduce:

1. Click "Open modal"
2. Click Submit in the Modal
3. Observe that the first name input in the background is validated.

[bluebill1049]

avoid wrap form with form to avoid event bubble to the parent form

<form><form/></form>
to
<form><form/>

[moroshko]

Sorry, I don't understand. I explicitly stated that the forms are not nested.

[bluebill1049]

react portal will still propagate event

[moroshko]

@bluebill1049 I must be missing something. Event propagation only goes up to the parents, right? How does it get to the other sibling form? The DOM looks like this:

div
  form1 // how does the submit event get here?
portal
  form2 // submitted

[Jamalahmad123]

Hi @moroshko, Did you solved this issue. I'm also facing the exact same issue

[bluebill1049]

#3704 (reply in thread)

[ParichayDidwania]

@bluebill1049 I am experiencing this issue in a different case. Both my button and modal component are outside the form, but the onSubmit inside the modal form is still triggering the sibling form.

This is the order:

Modal
form (open and close)
button to showModal