[pickers] FocusTrap: Uncaught RangeError: Maximum call stack size exceeded

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/silly-pare-9hlp73

Steps:

Open the browser console (for some reason the error doesn't show up in the CodeSandbox console)
Click on the date picker icon
Select any date
Click on Simple Dialog
Notice the Uncaught RangeError: Maximum call stack size exceeded. error in the console

Current behavior

After opening the DatePicker menu and another dialog on top of it, clicking anywhere inside the Dialog triggers a Maximum call stack size exceed error inside FocusTrap.

Expected behavior

The Uncaught RangeError: Maximum call stack size exceeded. error should not be thrown.

Context

In the real application we need to validate the selected dates and show a confirmation message inside a dialog on certain criteria, but clicking anywhere inside the Dialog throws an error and it closes the DatePicker selection menu (not sure if this is expected).

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.5 Binaries: Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm pnpm: Not Found Browsers: Chrome: 130.0.6723.59 Edge: Not Found Safari: 17.5 npmPackages: @emotion/react: ^11.13.3 => 11.13.3 @emotion/styled: ^11.13.0 => 11.13.0 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.16.7 @mui/icons-material: ^5.14.1 => 5.16.7 @mui/material: ^5.15.18 => 5.16.7 @mui/private-theming: 5.16.6 @mui/styled-engine: 5.16.6 @mui/system: 5.16.7 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: ^7.18.0 => 7.18.0 @mui/x-date-pickers: ^6.10.2 => 6.20.2 @mui/x-internals: 7.18.0 @types/react: ^18.0.37 => 18.3.5 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1 typescript: ^5.0.2 => 5.5.4 ```

Search keywords: pickers,datepickers,focustrap

Hello @efraimrodrigues

I suspect the issue comes from the fact that both PickersPopper and Dialog (Modal) rely on the FocusTrap and the usage of them simultaneously might cause issues on the focus management.

I suggest you, as a workaround, to use the disableEnforceFocus prop in order to manage the focus changement among the components. Depending on what behavior you want to achieve, you might want to pass it to the DatePicker via slotProps:

<DatePicker
  onChange={handleChange}
  closeOnSelect={false}
  slotProps={{
    desktopTrapFocus: {
      disableEnforceFocus: true,
    },
  }}
/>

or to the Dialog:

<Dialog disableEnforceFocus open={open} onClose={handleClose}>

I tested both approaches and it seems to prevent the stack size error. Let us know if this helps you 🙂

mui / mui-x