Material UI: Pressing Escape key closes Dialog before Snackbar/Alert

[g1hanna]

Steps to reproduce

Steps:

1. Open this link to live example: MUI-Dialog-Toast-Escape-Example
2. Press "Open Modal" to open the Dialog
3. Press "Open Toast" to open the Snackbar Alert
4. 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

[mnajdova]

You can use the disableEscapeKeyDown prop 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_LCQafiBEJ7ynffHYRMAZL

[mnajdova]

We can maybe extend a docs a bit to explain this, or add a demo. cc @samuelsycamore