Parent context is inaccessible inside a modal created with react-modal-hook

[firxworx]

I am experiencing an issue where a parent provider's context is inaccessible inside a modal created with the useModal() hook. I don't think this should be an issue because React portals can preserve context.

See the following codesandbox for an example of this issue:
https://codesandbox.io/s/formik-typescript-material-ui-react-modal-hook-nrz24

The codesandbox features a parent component that uses formik to manage the state of a form. Form context is provided by the parent Formik component. Children of the Formik component such as Field or FastField (or any component that uses the useFormikContext() hook) can access the form context.

However, if I try to access the formik context in a component that's inside of a modal created with react-modal-hook, it is not available.

I ruled out the TransitionGroup factor by replicating this issue in a non-animated modal.

I can eliminate the issue if I ditch react-modal-hook and use the Material UI dialogs directly.

Thanks for your work on this library, it is being used in production in a couple of my projects :)

[mpontus]

Hello, @firxworx.

I also experienced this problem and sadly I don't see an easy way out of this limitation.

React hooks can not render anything by themselves, nor can they use React.createPortal. When you call useModal it updates the context value governed by ModalProvider which is responsible for actually rendering the modal, therefore the only context available inside your modal would be the context around ModalProvider.

There are a couple of ways to go around this issue, either by rendering ModalProvider inside another context provider (in your case it's Formik) or by rendering context provider inside the modal.

Thank you very much for a well-crafted bug report. Let me know if you think there's something I'm missing.

[firxworx]

Hello, @mpontus,

I really appreciate the insanely fast and thoughtful reply. My reply back was delayed because I wanted to run your feedback by a friend and get his thoughts before responding :)

Your explanation makes sense and this does seem like your suggested workarounds are the way to go.

I created a follow-up codesandbox that demonstrates the workaround where the modal contents are wrapped by a context provider.

In case this helps anyone else --

In the case of Formik, the library thankfully exposes FormikContext. This enables the modal contents to be wrapped by a FormikContext.Provider component with the value set to the return of the useFormikContext() hook. The second argument to useModal(), the dependency array, must include the value so the modal contents can update as the user types into the inputs.

https://codesandbox.io/s/formik-typescript-material-ui-react-modal-hook-workaround-47kmu

[picosam]

Thanks a lot @mpontus and @firxworx for this thread, it's really helpful! Just wanted to check if this is still the current state of affairs or if there's potential work that can be done to remedy this. I'm happy to work on a pull request if you provide any potential guidance on this.

[mpontus]

Rendering modal inside the component calling useModal is not possible as far as I'm aware, and the point of this package is to provide a way to render modals via hooks interface. I don't really see a way around this.