Bug Report

Ionic version:

[ ] 4.x [x ] 5.x [ ] 6.x

Current behavior: Just in case this behavior is unintended, the new useIonModal hook renders the modal component passed to present() outside of the react tree as a sibling of the root node. Because of this, the component used has no access to any app-wide context that wraps the main “App” component that the calling component belongs to.

Expected behavior: Render the component for the modal inside the root react tree.

Steps to reproduce:

Follow the Ionic docs for rendering/presenting a React modal using useIonModal() hook.

Related code:

Here’s a screenshot where you see the component that the hook renders next to the component tree instead of inside it (either as a child or sibling of <App />)

Other information:

In case this is the intended behavior for the useIonModal hook - this may be an opportunity to mention in the docs when deciding whether to use the original <IonModal> wrapping component or the hook. Perhaps that the hook is meant for modals that don’t need access to app-wide data and for those and other complex use-cases continue to use the <IonModal> component. I would be happy to PR to the docs if needed! Thanks

Ionic info:

Ionic:

   Ionic CLI       : 5.4.16 (/Users/rene/.npm/_npx/23301/lib/node_modules/ionic)
   Ionic Framework : @ionic/react 5.6.10

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.7

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.3 (/Users/rene/.nvm/versions/node/v12.16.3/bin/node)
   npm    : 6.14.4
   OS     : macOS Mojave