Repository navigation
Material UI: Pressing Escape key closes Dialog before Snackbar/Alert #44799
Description
Steps to reproduce
Steps:
- Open this link to live example: MUI-Dialog-Toast-Escape-Example
- Press "Open Modal" to open the Dialog
- Press "Open Toast" to open the Snackbar Alert
- Press the Escape key
Current behavior
When the Escape key is pressed, the Dialog is closed first and the Alert is still displayed.
Expected behavior
Not sure what behavior should be enabled by default. Was expecting the layers to be closed in the order the user opened them (Toast on the first Escape key press, then the Modal on the second press). Ideally, we'd like to see a quick and easy way to configure this behavior.
Context
I am trying to implement a feature for a common use case in a production-facing React application. There are 50+ pages where a user can have both MUI Alerts and Dialogs open simultaneously. We need a solution that doesn't cause components that use Dialogs to be dependent on the open state of Snackbar or Alert components. We have been searching the MUI documentation and StackOverflow for this particular use case, but it has not come up in searches.
Your environment
npx @mui/envinfo
System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
Binaries:
Node: 18.18.0 - ~/.nvm/versions/node/v18.18.0/bin/node
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.0/bin/npm
pnpm: Not Found
Browsers:
Chrome: Version 131.0.6778.140 (Official Build) (64-bit)
npmPackages:
@emotion/react: ^11.13.3 => 11.13.3
@emotion/styled: ^11.13.0 => 11.13.0
@mui/base: 5.0.0-beta.58
@mui/core-downloads-tracker: 6.1.3
@mui/icons-material: ^6.1.1 => 6.1.3
@mui/lab: ^6.0.0-beta.10 => 6.0.0-beta.11
@mui/material: ^6.1.1 => 6.1.3
@mui/material-nextjs: ^6.1.1 => 6.1.3
@mui/private-theming: 6.1.3
@mui/styled-engine: 6.1.3
@mui/system: ^6.1.1 => 6.1.3
@mui/types: 7.2.18
@mui/utils: 5.16.6
@mui/x-data-grid: ^7.18.0 => 7.19.0
@mui/x-data-grid-pro: ^7.18.0 => 7.19.0
@mui/x-date-pickers: 7.19.0
@mui/x-date-pickers-pro: ^7.18.0 => 7.19.0
@mui/x-internals: 7.18.0
@mui/x-license: 7.18.0
@mui/x-tree-view: ^7.18.0 => 7.19.0
@types/react: ^18.3.9 => 18.3.11
react: 18.3.1 => 18.3.1
react-dom: ^18.2.0 => 18.3.1
typescript: ^5.6.2 => 5.6.3
Search keywords: Dialog Snackbar Alert Escape
Activity
mnajdova commentedon Dec 18, 2024
You can use the
disableEscapeKeyDownprop on the Dialog when the snackbar is open. This means that the Dialog will ignore the escape key while the snackbar is open, once it is closed it will be closed if the escape key is pressed. Check this CodeSandbox: https://codesandbox.io/p/sandbox/mui-dialog-toast-escape-example-forked-twt226?workspaceId=ws_LCQafiBEJ7ynffHYRMAZLmnajdova commentedon Dec 18, 2024
We can maybe extend a docs a bit to explain this, or add a demo. cc @samuelsycamore
minwookshin commentedon Oct 4, 2026
I’ll add a Dialog/Snackbar demo using the current
onCloseAPI, so the first Escape closes the snackbar and the next closes the dialog.github-actions commentedon Oct 7, 2026
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@g1hanna Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.