Open efraimrodrigues opened 2 days ago
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 🙂
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/silly-pare-9hlp73
Steps:
Simple Dialog
Uncaught RangeError: Maximum call stack size exceeded.
error in the consoleCurrent 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
``` 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 ```npx @mui/envinfo
Search keywords: pickers,datepickers,focustrap