Weird behavior when form contains button which open <ModalForm /> #3704

Steffi3rd · 2020-12-16T13:05:05Z

Steffi3rd
Dec 16, 2020

Hello,

I have a form where I have 2 buttons : one to submit the current form and another to open a <ModalForm />.

In this <ModalForm />, I have another form.

The weird behavior is when I submit form inside <ModalForm />, it submits the parent form whereas when I check the tree in the browser, the modal is not inside the parent form but at the end of page just before </body>

const { handleSubmit } = useForm(...);

return (
  <form onSubmit={handleSubmit(...)}>
      ...
      <OpenModalForm />
      <button type="submit">Submit</button>
  </form>
)

const OpenModalForm = () => (
  const [modalOpen, setOpenModal] = React.useState(false);

  return (
    <>
      <button onClick={() => setOpenModal(true)}>
        Open Modal Form
      </button>
      <ModalForm
        open={modalOpen}
        onClose={() => setOpenModal(false)}
      />
    </>
  );
)

const ModalForm = () => (
  const { handleSubmit } = useForm(...);

  return (
    <form onSubmit={handleSubmit(...)}>
        ...
        <button type="submit">Submit</button>
     </form>
  );
)

Is there a solution for that?

Answered by adamayres

Nov 16, 2022

Reposting as a top level comment, originally posted here.

I ran into this same issue and have created a codesandox with the reproduction here: https://codesandbox.io/s/react-hook-form-nested-9qtck

Some things to note

The form in the Modal is added to the DOM as a child of the <body> element, so it is not a nested form with regards to the DOM. The modal, and the form it contains, are however child components of the containing form, so as far as the React tree is concerned, they are nested. The modal and it's form are added to the <body> by way of using a React Portal, here is a reference to the code where that is done.
I believe the issue here is that the Synthetic "submit" event is bubbl…

View full answer

bluebill1049 · 2020-12-16T21:45:37Z

bluebill1049
Dec 16, 2020
Maintainer

This is correct you should not nest your form inside of each other.

You can have several forms on a page but they should not be nested.

4.10.3 The form element

Content model:

Flow content, but with no form element descendants.

4 replies

Steffi3rd Dec 17, 2020
Author

Yup, I know that. But the thing is, it seems that my <ModalForm /> is not really nested because it appears at the end of page just before </body> (so outside of the parent <form>)

What do you think?

bluebill1049 Dec 17, 2020
Maintainer

not sure on that then, can you reproduce that in a simple cSB?

adamayres Jan 6, 2021

@bluebill1049 I ran into this same issue and have created a codesandox with the reproduction here: https://codesandbox.io/s/react-hook-form-nested-9qtck

Some things to note

The form in the Modal is added to the DOM as a child of the <body> element, so it is not a nested form with regards to the DOM. The modal, and the form it contains, are however child components of the containing form, so as far as the React tree is concerned, they are nested. The modal and it's form are added to the <body> by way of using a React Portal, here is a reference to the code where that is done.
I believe the issue here is that the Synthetic "submit" event is bubbling up the React Tree (see here and here) causing the modal in the form to submit and the parent component that contains a form to submit.
Attempting to call event.stopPropagation() inside of the onValid callback of handleSubmit of useForm does not prevent the form in the containing component from submitting. However, if you call event.stopPropagation() before calling handleSubmit in the modal form then it does prevent the form in the containing component from being submitted (see workaround below). I believe this may happen because the onValid callback in handleSubmit is called async - after the event has already bubbled.
This same issue occurs whether or not you use FormProvider or directly use useForm. This same issue has been raised before here where the recommendation was to move the form in the modal/dialog outside of the containing form. I believe the reason this fixes the issue is because the form is no longer nested in the React tree and thus the synthetic event does not bubble up to the containing component with the form. This is a reasonable workaround however is not viable given the way I have my code organized.

Workaround

In the nested form in the modal, change this:

<Form onSubmit={handleSubmit(onValid, onInvalid)}>

To this:

<Form 
  onSubmit={(event) => {
    event.stopPropagation();
    handleSubmit(onValid, onInvalid)(event)
  }}
>

Potential Fix in library

In handleSubmit you might consider calling event.stopPropagation OR expose a prop that conditionally calls it. Thoughts?

jonasgroendahl May 20, 2023

genius, thanks!

bluebill1049 · 2022-11-12T05:50:13Z

bluebill1049
Nov 12, 2022
Maintainer

thanks @adamayres if you want to post another comment and we can mark #3704 (reply in thread) as answer

0 replies

adamayres · 2022-11-16T02:24:13Z

adamayres
Nov 16, 2022

Reposting as a top level comment, originally posted here.

I ran into this same issue and have created a codesandox with the reproduction here: https://codesandbox.io/s/react-hook-form-nested-9qtck

Some things to note

The form in the Modal is added to the DOM as a child of the <body> element, so it is not a nested form with regards to the DOM. The modal, and the form it contains, are however child components of the containing form, so as far as the React tree is concerned, they are nested. The modal and it's form are added to the <body> by way of using a React Portal, here is a reference to the code where that is done.
I believe the issue here is that the Synthetic "submit" event is bubbling up the React Tree (see here and here) causing the modal in the form to submit and the parent component that contains a form to submit.
Attempting to call event.stopPropagation() inside of the onValid callback of handleSubmit of useForm does not prevent the form in the containing component from submitting. However, if you call event.stopPropagation() before calling handleSubmit in the modal form then it does prevent the form in the containing component from being submitted (see workaround below). I believe this may happen because the onValid callback in handleSubmit is called async - after the event has already bubbled.
This same issue occurs whether or not you use FormProvider or directly use useForm. This same issue has been raised before here where the recommendation was to move the form in the modal/dialog outside of the containing form. I believe the reason this fixes the issue is because the form is no longer nested in the React tree and thus the synthetic event does not bubble up to the containing component with the form. This is a reasonable workaround however is not viable given the way I have my code organized.

Workaround

In the nested form in the modal, change this:

<Form onSubmit={handleSubmit(onValid, onInvalid)}>

To this:

<Form 
  onSubmit={(event) => {
    event.stopPropagation();
    handleSubmit(onValid, onInvalid)(event)
  }}
>

Potential Fix in library

In handleSubmit you might consider calling event.stopPropagation OR expose a prop that conditionally calls it. Thoughts?

2 replies

bluebill1049 Nov 16, 2022
Maintainer

In handleSubmit you might consider calling event.stopPropagation OR expose a prop that conditionally calls it. Thoughts?

Yes, we can consider that as a config.

hornta Feb 13, 2024

Have you come to any conclusion regarding making this an option?

React Hook Form

Weird behavior when form contains button which open <ModalForm /> #3704

Uh oh!

Uh oh!

Steffi3rd Dec 16, 2020

Replies: 3 comments · 6 replies

Uh oh!

bluebill1049 Dec 16, 2020 Maintainer

Uh oh!

Steffi3rd Dec 17, 2020 Author

Uh oh!

bluebill1049 Dec 17, 2020 Maintainer

Uh oh!

Uh oh!

adamayres Jan 6, 2021

Uh oh!

jonasgroendahl May 20, 2023

Uh oh!

Uh oh!

bluebill1049 Nov 12, 2022 Maintainer

Uh oh!

adamayres Nov 16, 2022

Uh oh!

bluebill1049 Nov 16, 2022 Maintainer

Uh oh!

hornta Feb 13, 2024

Steffi3rd
Dec 16, 2020

Replies: 3 comments 6 replies

bluebill1049
Dec 16, 2020
Maintainer

Steffi3rd Dec 17, 2020
Author

bluebill1049 Dec 17, 2020
Maintainer

bluebill1049
Nov 12, 2022
Maintainer

adamayres
Nov 16, 2022

bluebill1049 Nov 16, 2022
Maintainer