[pickers] 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?

[michelengelen]

I'll add it to the board for now

[LukasTy]

Hello @m-zaharieva.
I'm not familiar with Ionic and their components, but it seems to be doing some focus management of its own that might be interfering with FocusTrap behavior from @mui/material.
Could you please try providing the following slotProps and see if that doesn't negatively impact your behavior?
Check this documentation for more information about it.

slotProps={{
  dialog: {
    disableEnforceFocus: true,
  }
}}

P.S. You are defining your textField slot inline, this might produce unnecessary remounting of the component, please check the recommended usage documentation and consider doing the necessary changes.

All the changes I've done:

• Extract inline textField component outside of Tab1 into CustomTextField
• Apply the following changes:

  slots={{
    textField: CustomTextField,
  }}
  slotProps={{
    textField: {
      errors,
    },
    dialog: {
      disableEnforceFocus: true,
    }
  }}

Does it help you solve the problem? 🤔

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.