MUI Modal overlay ionic select popups

Issue

I have a react application in which I use the MUI lib, but I still use ionic in most of the code.

DESCRIPTION Upon opening MUI modal windows that contain ionic selects inside, the select modals get overlapped by the MUI modal window, blocking the user from using the site.

Reason: The modal window of the MUI is rendered based on its portal, while ionic lies in a different context. So there is a problem of incompatibility of libraries that use different approaches. A clear example in the sandbox: https://codesandbox.io/s/ionic-react-select-icon-bug-forked-jotf5q?file=/src/App.tsx

In order to fix the problem of course we can use our own select with popup solution instead ionic select, but I just wondering if it's possible to fix this but ( that I provided in codesandbox), another way.

Update: Look that it relates to root styles .ion-page, but still wondering how to fix it

Solution

the reason behind that is that MUI is appending the modal outside the ion-app/root app.

my solution for this is to add a container to Mui Modal like

<Modal container={document.querySelector("ion-app")} >

Answered By - Haiyan