Form inside a form | Mantine | Page 1

real spoke Apr 10, 2024, 6:14 PM

#

Hi,

I have a form with some fields and one of the fields has its own component which has a form in it. When I submit this internal field form, the parent form also get's submitted. Is there a way to handle this situation?

I am using v5.10.5 of mantine form

real spoke Apr 10, 2024, 6:57 PM

#

@tardy trout @hexed schooner is there a mantine way to address this?

tardy trout Apr 10, 2024, 7:01 PM

#

it is not valid to have a form within a form in html, regardless of mantine/react

#

depending on where you put it, you should separate it somehow

#

for example you could have a modal popup, that you use withinPortal, so it's part of a separate element tree in the document

#

form must not contain other form elements.
https://www.w3.org/TR/xhtml1/#prohibitions

real spoke Apr 10, 2024, 7:06 PM

#

I am using the internal form in a Modal so that it could be separated in the element tree, but still the parent onSubmit is getting fired on child on submit

tardy trout Apr 10, 2024, 7:32 PM

#

make sure your modal is in a portal

#

set withinPortal on the modal

real spoke Apr 10, 2024, 7:59 PM

#

Yeah I did that, still no luck

#

is there some portalProps that I can provide which can help solve this?

real spoke Apr 11, 2024, 7:47 AM

#

@hexed schooner can you suggest how to prevent parent form submission when inner form is submitted?

#Form inside a form