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

[efraimrodrigues]

Steps to reproduce

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

Steps:

1. Open the browser console (for some reason the error doesn't show up in the CodeSandbox console)
2. Click on the date picker icon
3. Select any date
4. Click on Simple Dialog
5. 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

[arthurbalduini]

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 🙂

[github-actions]

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