From 077efc9b6e1498ddfa86a5627fd7e8740f983016 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Thu, 20 Jul 2023 21:14:29 +0200
Subject: [PATCH 1/2] fix row click propagation causing error in nested grid

---
 packages/grid/x-data-grid/src/components/GridRow.tsx            | 2 +-
 .../src/hooks/features/rowSelection/useGridRowSelection.ts      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/grid/x-data-grid/src/components/GridRow.tsx b/packages/grid/x-data-grid/src/components/GridRow.tsx
index 310489bdb773..85b9c308c432 100644
--- 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
index d7d0f9ab438c..baa86964ee0c 100644
--- 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;
         }
       }

From 31b0fc2a1fd70a79a6a0dee98fd4d48336300b47 Mon Sep 17 00:00:00 2001
From: Andrew Cherniavskyi <andrew@mui.com>
Date: Thu, 20 Jul 2023 21:46:00 +0200
Subject: [PATCH 2/2] add unit test

---
 .../src/tests/rows.DataGrid.test.tsx          | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

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
index 0d94b659020a..6af66503a3af 100644
--- 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}`;