[pickers][MobileDatePicker] Too much recursion error when using MobileDatePicker inside a IonModal component

[m-zaharieva]

Steps to reproduce

Link to live example: (required) I have created this repository, reproducing the problem I am facing: https://github.com/m-zaharieva/mui-mobile-date-picker-issue Steps:

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.

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.

Context

I am developing a mobile application with ionic, react and MUI. I have a form, inside a modal, that has a field for month picking. But @mui Mobile Date Picker inside Modal is causing an too much recursion. I tested it outside the modal component and it does not have this behavior.

Your environment

npx @mui/envinfo

``` FireFox - 126.0.1 (64-bit) System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (126.0.2592.61) ```

Search keywords: mobiledatepicker, ionic, react, recursion error,

Search keywords:

[michelengelen]

@LukasTy I am not sure if we can do something about this. For some reason ionic seems to manually sets focus on an element. Wouldn't that be an issue with iconic then?

[DanailH]

@LukasTy Are we still triaging this issue?