[DataGrid] Close other actions menus when opening a new one

packages/grid/_modules_/grid/components/cell/GridActionsCell.tsx

@@ -27,10 +27,7 @@ const GridActionsCell = (props: GridActionsCellProps) => {
     throw new Error('MUI: Missing the `getActions` property in the `GridColDef`.');
   }
 
-  const showMenu = (event: React.MouseEvent) => {
-    event.stopPropagation();
-    setOpen(true);
-  };
+  const showMenu = () => setOpen(true);
 
   const hideMenu = () => setOpen(false);
 

packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts

@@ -10,7 +10,7 @@ import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridState } from '../../utils/useGridState';
 import { gridRowsLookupSelector } from '../rows/gridRowsSelector';
-import { isGridCellRoot } from '../../../utils/domUtils';
+import { findParentElementFromClassName, isGridCellRoot } from '../../../utils/domUtils';
 import {
   gridSelectionStateSelector,
   selectedGridRowsSelector,
@@ -19,7 +19,7 @@ import {
 import { gridPaginatedVisibleSortedGridRowIdsSelector } from '../pagination';
 import { gridVisibleSortedRowIdsSelector } from '../filter/gridFilterSelector';
 import { GRID_CHECKBOX_SELECTION_COL_DEF, GridColDef } from '../../../models';
-import { getDataGridUtilityClass } from '../../../gridClasses';
+import { getDataGridUtilityClass, gridClasses } from '../../../gridClasses';
 import { useGridStateInit } from '../../utils/useGridStateInit';
 import { GridPreProcessingGroup, useGridRegisterPreProcessor } from '../../core/preProcessing';
 import { GridCellModes } from '../../../models/gridEditRowModel';
@@ -331,18 +331,31 @@ export const useGridSelection = (
         return;
       }
 
+      const cellClicked = findParentElementFromClassName(
+        event.target as HTMLElement,
+        gridClasses.cell,
+      );
+      const field = cellClicked?.getAttribute('data-field');
+      if (field) {
+        const column = apiRef.current.getColumn(field);
+        if (column.type === 'actions') {
+          return;
+        }
+      }
+
       if (event.shiftKey && (canHaveMultipleSelection || checkboxSelection)) {
         expandRowRangeSelection(params.id);
       } else {
         handleSingleRowSelection(params.id, event);
       }
     },
     [
-      expandRowRangeSelection,
-      handleSingleRowSelection,
-      canHaveMultipleSelection,
       disableSelectionOnClick,
+      canHaveMultipleSelection,
       checkboxSelection,
+      apiRef,
+      expandRowRangeSelection,
+      handleSingleRowSelection,
     ],
   );
 

packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, fireEvent, screen, waitFor } from '@material-ui/monorepo/test/utils';
+import { createRenderer, fireEvent, screen } from '@material-ui/monorepo/test/utils';
 import { expect } from 'chai';
 import { spy, stub } from 'sinon';
 import Portal from '@mui/material/Portal';
@@ -10,7 +10,7 @@ import { getData } from 'storybook/src/data/data-service';
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<DataGrid /> - Rows', () => {
-  const { render } = createRenderer();
+  const { render, clock } = createRenderer({ clock: 'fake' });
 
   const baselineProps = {
     autoHeight: isJSDOM,
@@ -110,7 +110,10 @@ describe('<DataGrid /> - Rows', () => {
   });
 
   describe('columnType: actions', () => {
-    const TestCase = ({ getActions }: { getActions?: () => JSX.Element[] }) => {
+    const TestCase = ({
+      getActions,
+      ...other
+    }: { getActions?: () => JSX.Element[] } & Partial<DataGridProps>) => {
       return (
         <div style={{ width: 300, height: 300 }}>
           <DataGrid
@@ -123,6 +126,7 @@ describe('<DataGrid /> - Rows', () => {
                 getActions,
               },
             ]}
+            {...other}
           />
         </div>
       );
@@ -186,7 +190,7 @@ describe('<DataGrid /> - Rows', () => {
       );
       expect(getRow(0).className).not.to.contain('Mui-selected');
       fireEvent.click(screen.getByRole('button', { name: 'more' }));
-      await waitFor(() => expect(screen.queryByText('print')).not.to.equal(null));
+      expect(screen.queryByText('print')).not.to.equal(null);
       fireEvent.click(screen.queryByText('print'));
       expect(getRow(0).className).not.to.contain('Mui-selected');
     });
@@ -197,5 +201,23 @@ describe('<DataGrid /> - Rows', () => {
       fireEvent.click(screen.getByRole('button', { name: 'more' }));
       expect(getRow(0).className).not.to.contain('Mui-selected');
     });
+
+    it('should close other menus before opening a new one', () => {
+      render(
+        <TestCase
+          rows={[{ id: 1 }, { id: 2 }]}
+          getActions={() => [<GridActionsCellItem label="print" showInMenu />]}
+        />,
+      );
+      expect(screen.queryAllByRole('menu')).to.have.length(0);
+
+      fireEvent.click(screen.getAllByRole('button', { name: 'more' })[0]);
+      clock.runToLast();
+      expect(screen.queryAllByRole('menu')).to.have.length(1);
+
+      fireEvent.click(screen.getAllByRole('button', { name: 'more' })[1]);
+      clock.runToLast();
+      expect(screen.queryAllByRole('menu')).to.have.length(1);
+    });
   });
 });