bug: Ionic 8 React - Modals cannot consume context data

[Sagie501]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v8.x

Current Behavior

Modals are unable to consume data using React's context provider. All values provided by context are undefined.

Expected Behavior

Receive provided context data in modals

Steps to Reproduce

1. Create React context
2. Open modal
3. Consume context

Code Reproduction URL

https://github.com/playaz87/ionic-7-modal-context

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/react 8.2.5

Capacitor:

Capacitor CLI : 6.1.1 @capacitor/android : not installed @capacitor/core : 6.1.1 @capacitor/ios : 6.1.1

Utility:

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

System:

NodeJS : v18.18.0 npm : 9.8.1 OS : macOS Unknown

Additional Information

So basically this issue is the same as this one: https://github.com/ionic-team/ionic-framework/issues/27546 However the suggested solution is not good for every scenario.

In my case the context provider can't be above the IonApp component since it is only exist deeper in the tree.

I think ionic should provide a way to overcome it. A solution that might work pretty good is like antd useModal hook. This hook provide a contextHolder which you put within your jsx (which than will be mounted there) and by that you can access the context.

[Maxime-p]

Your provider is not above the IonApp ? Because the modal is created at this place. You can't access context data outside the provider. This is not an Ionic bug

[Sagie501]

@Maxime-p No thats exactly what this issue is about. My provider is below the IonApp, much deeper in the tree. You might consider it a future request and not a bug, but the current implementation of useIonModal prevents me to use the power of react context.

[Maxime-p]

And you have no way to move your context-provider upper ?