[Bug]: FormProvider -> Portal -> FormProvider mixes form state

[mayteio]

Version Number

7.15.3

Codesandbox/Expo snack

https://codesandbox.io/s/holy-rain-nk0oq?file=/src/App.js

Steps to reproduce

1. Go to https://codesandbox.io/s/holy-rain-nk0oq?file=/src/App.js
2. Click on "open modal" and click submit
3. Main form's validation is triggered inside useEffect because isSubmitted wrongly set to true

Expected behaviour

Main FormProvider's state should not be modified by child FormProvider's state. isSubmitted should stay falsy for main form when portal form is submitted.

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

[bluebill1049]

This is not an issue to the lib, if you submitted the form doesn't matter if it's the main/sub form. the submitted will be updated. there is only a single useForm instance unless you have two separate useForm. one for main and another for sub form

[mayteio]

@bluebill1049 I am using two useForm instances, one on line 20 and one on line 71. Can you please check the codesandbox to verify?

[bluebill1049]

miss the second one, have a look at it again.

[mayteio]

Thank you. Please let me know if I'm doing something wrong in implementation 👍🏻

[bluebill1049]

problem found, i will update both here and in the issue.

[bluebill1049]

This is due to nested form:

<form>
  <Modal isOpen={isOpen} onClose={onClose}>
    <ModalOverlay />
    <ModalContent>
      <ModalBody>
        <ModalForm onSuccess={onClose} />
      </ModalBody>
    </ModalContent>
  </Modal>
</form>

to

<form>
 ...
</form>
<Modal isOpen={isOpen} onClose={onClose}>
  <ModalOverlay />
  <ModalContent>
    <ModalBody>
      <ModalForm onSuccess={onClose} />
    </ModalBody>
  </ModalContent>
</Modal>

move the modal out should solve the problem.

if you nested form element with form element, onSubmit will be triggered which leads to handleSubmit, this is not related to hook form, instead of native behavior.

Work around (not recommend as it breaks accessbility)

you can attach onClick with handleSubmit instead to trigger the submission and validation.

[bluebill1049]

here is a reproducible CSB: https://codesandbox.io/s/pedantic-tereshkova-xvdsg?file=/src/App.js

[mayteio]

But then I miss out on handleSubmit validation and the values of the modal form being passed in onSubmit and makes react-hook-form basically useless in the modal.

Can you please explain how this isn't a bug? The context isn't working as expected. useFormState should be scoped to it's closest parent FormProvider, and especially the control that is passed directly to it as in the main form.

One would not expect that child FormProvider affects an Ancestor FormProvider - that's not how react context works. Context consumes the closest parent Provider.

[bluebill1049]

makes react-hook-form basically useless in the modal.

refer here... #6634 (comment)

please refer to the example above, in the codesandbox it's not even using hook form, how do you expect us to fix it? i even provided a workaround to avoid this problem...

[mayteio]

Sorry, there must be some mis-communication. I am using hook form in both the main form and the modal. See highlighted lines:

useForm being used in the main component

useForm being used in the modal component

It's not a nested <form>, because the the Portal of the modal moves it outside the component stack. If they were nested, I'd get a native warning about not having nested forms like this:

So two FormProviders shouldn't affect each other. Here's an example of expected behaviour and a simplified version of the problem. Shouldn't . Submitting the child form does not affect the parent form's state.

So - are you saying there is no way to catch the event form submit being bubbled up to the parent form?

[mayteio]

Interestingly, I tried to write a failing test in Jest but it seems it works as expected in JSDOM and passes. This differs from the real environment results (exactly the same code):

[mayteio]

I've fixed it temporarily. By adding e.stopPropagation() into the handler:

<Portal>
<form
  onSubmit={(e) => {
    e.stopPropagation();
    methods.handleSubmit(() => void 0)(e);
  }}
/>
</Portal>

If you'd like to address this, you can add e.stopPropagation() here. I've created a PR if you want it.

So just to confirm it is a bug with RHF not preventing events propagating up the component chain in a valid HTML structure.

[bluebill1049]

did you look at my example above? https://codesandbox.io/s/focused-hooks-r8ly0?file=/src/App.js

it's not even using hook form:

This is not an issue related to hook form and we shouldn't add anything in lib to affect this behaviour.

[mayteio]

I need to use RHF in the modal though. For validation, errors, state, etc and getting values onSubmit. I should be able to do this. It's a requirement of our app. You've simply removed the second useForm instance from the modal which doesn't solve the problem.

Anyway - thanks for exploring with me. The PR is there that solves this bug. As a workaround (for anyone else who might run into this bug) you can manually call e.stopPropagation, then handleSubmit()(event) to prevent the portal's form bubbling to the parent.

[bluebill1049]

did you look at my example? where is the hook form? someone help plz...

[bluebill1049]

I think I have given enough attention and support in here, anyone else can help please help and jump in.

[mayteio]

Sorry, I thought you meant in the ModalForm component. I missed that and my apologies. I understand you're saying that it's expected behaviour natively as well. The workaround provided is the incorrect workaround though, using e.stopPropagation in onSubmit lets you correctly validate a form -> portal -> form.

[aashishGitHub]

I had same problem, where I had to show multiple independent forms on the same page to be opened based on some conditions, some as sub-forms. The problem was seen when we submit one form, another form in dom used to get submitted.
I solved it by using display none to non displayed forms, kept it inside a portal.

<div
  className={clsx('fixed w-full top-0 right-0 transition-all duration-300', {
    'right-[-100%] ': isForm1Closed,
  })}
>
  <div ref={refFormOne} className={isForm1Closed? 'hidden' : 'block'} />
  <Portal container={refFormOne.current}>
    <FormOne />
  </Portal>
</div>

<div
  className={clsx('fixed w-full top-0 right-0 transition-all duration-300', {
    'right-[-100%] ': isForm2Closed,
  })}
>
  <div ref={refFormTwo} className={isForm2Closed? 'hidden' : 'block'} />
  <Portal container={refFormTwo.current}>
    <FormTwo />
  </Portal>
</div>;