[DataGrid] Fix row click propagation causing error in nested grid (#9741

)
mui · Jul 21, 2023 · f908c2a · f908c2a
1 parent 3d8ab7e
commit f908c2a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 2 deletions.
diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
@@ -247,7 +247,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
 
         // User clicked a button from the "actions" column type
         const column = apiRef.current.getColumn(field);
-        if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+        if (column?.type === GRID_ACTIONS_COLUMN_TYPE) {
           return;
         }
       }

diff --git a/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts b/packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts
@@ -386,7 +386,7 @@ export const useGridRowSelection = (
       if (field) {
         const column = apiRef.current.getColumn(field);
 
-        if (column.type === GRID_ACTIONS_COLUMN_TYPE) {
+        if (column?.type === GRID_ACTIONS_COLUMN_TYPE) {
           return;
         }
       }

diff --git a/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx b/packages/grid/x-data-grid/src/tests/rows.DataGrid.test.tsx
@@ -25,6 +25,8 @@ import {
 } from '@mui/x-data-grid';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 import { getColumnValues, getRow, getActiveCell, getCell } from 'test/utils/helperFn';
+import Dialog from '@mui/material/Dialog';
+
 import { COMPACT_DENSITY_FACTOR } from '../hooks/features/density/useGridDensity';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
@@ -122,6 +124,43 @@ describe('<DataGrid /> - Rows', () => {
     expect(handleRowClick.callCount).to.equal(1);
   });
 
+  // https://github.com/mui/mui-x/issues/8042
+  it('should not throw when clicking the cell in the nested grid in a portal', () => {
+    const rows = [
+      { id: 1, firstName: 'Jon', age: 35 },
+      { id: 2, firstName: 'Cersei', age: 42 },
+      { id: 3, firstName: 'Jaime', age: 45 },
+    ];
+
+    function NestedGridDialog() {
+      return (
+        <Dialog open>
+          <div style={{ height: 300, width: '100%' }}>
+            <DataGrid rows={rows} columns={[{ field: 'id' }, { field: 'age' }]} />
+          </div>
+        </Dialog>
+      );
+    }
+
+    expect(() => {
+      render(
+        <div style={{ width: 300, height: 300 }}>
+          <DataGrid
+            columns={[
+              { field: 'id' },
+              { field: 'firstName', renderCell: () => <NestedGridDialog /> },
+            ]}
+            rows={rows}
+          />
+        </div>,
+      );
+
+      // click on the cell in the nested grid in the column that is not defined in the parent grid
+      const cell = document.querySelector('[data-rowindex="0"] [role="cell"][data-field="age"]')!;
+      fireEvent.click(cell);
+    }).not.toErrorDev();
+  });
+
   describe('prop: getRowClassName', () => {
     it('should apply the CSS class returned by getRowClassName', () => {
       const getRowId: GridRowIdGetter = (row) => `${row.clientId}`;