bug: Too much recursion error when using @mui MobileDatePicker inside a IonModal component

[m-zaharieva]

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

the console shows multiple errors: Uncaught InternalError: too much recursion focusLastDescendant overlays.js:124 trapShadowFocus overlays.js:271 ....

Expected Behavior

To select the clicked date with no errors on the console.

Steps to Reproduce

1. Install the npm packages by "npm install" command.
2. "npm run dev" to run the project locally.
3. Click on the white bordered input at the top left corner, to open the mobile date picker and select a random date.

Code Reproduction URL

https://github.com/m-zaharieva/mui-mobile-date-picker-issue

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (C:\Users\user\AppData\Roaming\nvm\v20.9.0\node_modules\@ionic\cli) Ionic Framework : @ionic/react 8.2.2

Capacitor:

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

Utility:

cordova-res : 0.15.4 native-run : 2.0.1

System:

NodeJS : v20.9.0 (C:\Program Files\nodejs\node.exe) npm : 10.1.0 OS : Windows 10

Additional Information

No response

[liamdebeasi]

Have you tried temporarily disabling focus trapping when using 3rd party libraries? https://ionicframework.com/docs/api/modal#focustrap

Ionic is trying to ensure focus remains inside of IonModal. It doesn't know that MUI's date picker also shows its own modal. To fix this, you'd want to disable focus trapping on IonModal when MUI's modal opens and re-enable it on IonModal when MUI's modal closes.