[data grid] Dialog closes when pressing Tab after triggering a custom action from the actions popper

[MarmerMax]

Steps to reproduce

Steps:

1. Open the DataGrid documentation.
2. Navigate to the Columns section: https://mui.com/x/react-data-grid/column-definition/
3. Scroll to the Actions section.
4. In the example DataGrid, click the actions icon (three dots).
5. Select the “Delete” action — a confirmation dialog opens.
6. You’ll notice the actions popper (the three-dot menu) remains open behind the dialog — this is fine.
7. Press the Tab key to move focus between the “Cancel” and “Delete” buttons in the dialog.
8. The dialog unexpectedly closes. This happens because the actions popper loses focus and closes itself, causing the entire example (including the dialog) to re-render and unmount.

Current behavior

The dialog closes when focus changes (via Tab), because closing the actions popper triggers a re-render that unmounts the dialog.

Screen.Recording.2025-10-29.at.21.58.53.mov

Expected behavior

Tabbing between buttons in the dialog should not close the dialog or the actions popper behind it.

Context

I’m using the MUI DataGrid with an actions column that opens a confirmation dialog when the user selects an action (e.g., “Delete”). The dialog is rendered in the same React tree as the DataGrid — typically in the same component where the DataGrid is defined.

The goal is to allow users to perform row-specific actions (edit, delete, etc.) directly from the DataGrid without navigation. However, when the dialog opens, the actions popper (the menu triggered by the three-dot icon) remains open in the background. As soon as the user presses Tab to move focus within the dialog, the popper loses focus, closes itself, and triggers a re-render that unmounts the dialog.

This makes it impossible to interact with dialog buttons using the keyboard and breaks accessibility (keyboard navigation).

Essentially, I’m trying to keep the dialog open independently of the DataGrid’s popper state so that keyboard navigation works as expected.

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.3.2
  Binaries:
    Node: 22.14.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 141.0.7390.123
    Edge: Not Found
    Firefox: Not Found
    Safari: 18.3.1
  npmPackages:
    @emotion/react:  11.14.0 
    @emotion/styled:  11.14.1 
    @mui/core-downloads-tracker:  7.1.0 
    @mui/icons-material:  7.1.0 
    @mui/material:  7.1.0 
    @mui/private-theming:  7.1.0 
    @mui/styled-engine:  7.1.0 
    @mui/system:  7.1.0 
    @mui/types:  7.4.2 
    @mui/utils:  7.3.3 
    @mui/x-data-grid:  7.23.0 
    @mui/x-date-pickers:  7.23.0 
    @mui/x-internals:  8.14.0 
    @mui/x-virtualizer:  0.2.5 
    @toolpad/core:  0.16.0 
    @toolpad/utils:  0.16.0 
    @types/react:  18.3.3 
    react:  18.3.1 
    react-dom:  18.3.1 

Search keywords: DataGrid actions popper, DataGrid actions menu, DataGrid focus issue, DataGrid dialog closes, MUI DataGrid custom action, DataGrid popper focus lost, DataGrid tab key dialog bug, DataGrid actions column, DataGrid menu stays open, MUI X DataGrid accessibility, DataGrid re-render on focus change, DataGrid popup dialog unmount

[arminmeh]

@MarmerMax
Thank you for reporting this.
I have reproduced the issue and will take a look.

[arminmeh]

@MarmerMax,
Moving the dialog outside of the cell component resolves the issue.
I have made a PR to update the demo code.
You can check the new demo here.