issue: Separate forms produces conflict and call each other's onSubmits

[MajidBabaeifar]

Version Number

7.52.0

Codesandbox/Expo snack

https://codesandbox.io/embed/p7p6lx24xq?codemirror=1

Steps to reproduce

The sandBox link is just a demonstration of something like the UI I have and IS NOT my project.

1. With Next version 14.2.5 create a simple form and use a field array in the form.
2. For adding new fields in fieldArray use a Modal which uses portals for rendering.
3. make the modal form a separate form with its own separate hooks
4. click on submit of modal form
5. onSubmit for both forms (original form and modal form) gets called

Further explanation :
After trying some ways (preventDefault and stopPropagation and ... ) some struggling, I did a hacky way to prevent this:

// in modal onSubmit: 
const onSubmit: SubmitHandler<FormValues> = (data, e) => {
    if (e != null) e.currentTarget = "HackySet_NewFieldModal";
    props.append(data);
    closeNewFieldModal();
  };

and ...

// in riginal form onSubmit:
  const handleOnSubmit: SubmitHandler<any> = async (data, event) => {
    if (event?.currentTarget == "HackySet_NewFieldModal") return; 
    ...
  };

Which works when in the modal fields doesn't have validation errors. but when they have error and the onSubmit of the modal doesn't run because of validation error, then it doesn't run the above code and therefore original onSubmit gets called again.

Expected behaviour

Calling modal form should not have any effects on the other one.

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[MajidBabaeifar]

We can also do :

// in modal: 
...
<form id="HackyId_newFieldModalForm" onSubmit={handleSubmit(onSubmit)}>
...

// in riginal form onSubmit:
...
if (event?.target?.id == "HackyId_newFieldModalForm") return;
...

Although this works fine, But seems like a hacky solution again. 

[EWisselink]

You are effectively nesting forms, either don't nest your form by moving the modal out of the form or put a wrapper in with stop propagation.

[MajidBabaeifar]

You are effectively nesting forms, either don't nest your form by moving the modal out of the form or put a wrapper in with stop propagation.

If I use react-portals for my modal, doesn't my modal renders in a whole other element? so It's not actually nested.

[EWisselink]

React will propagate the events by default through your portal, so it effectively is nested. That is why I have stopped propagation on my modal.

[MajidBabaeifar]

React will propagate the events by default through your portal, so it effectively is nested. That is why I have stopped propagation on my modal.

But they are not nested. they are siblings. propagation goes up to the DOM. It doesn't go to sibling nods

[EWisselink]

In the example you posted it is nested in the react code.

[MajidBabaeifar]

In the example you posted it is nested in the react code.

come on ￣へ￣
at least read the issue before answering!
I have said it in BOLD , that its just a UI representation and is NOT MY PROJECT

[EWisselink]

OK I will stop answering then. I had read it but as you are not linking to your code but only your example I can only give you feedback on the example.

[yordanovdev]

Had the same exact issue today. The forms are not nested ( can be seen in the DOM tree ) but both forms are submitting at the same exact time. Thanks to @MajidBabaeifar for the solution, had to tweak it a little bit but eventually it worked fine for me. This has to be fixed for the future though

[alexZaicev]

@EWisselink as per your suggestion I moved the form that is inside a separate modal component into the body element, to ensure that both forms are not nested. However, upon submitting that modal form, the main form gets submitted as well.

I found a workaround for that, that prevents the propagation of the default events

onSubmit={e => {
  e?.stopPropagation();
  e.preventDefault();
  return handleSubmit(onSubmit)(e);
}}