[DataGrid] Fix handling of event target in portal (#11209)

docs/data/data-grid/recipes-editing/SingleClickEditing.js

@@ -72,7 +72,7 @@ export default function SingleClickEditing() {
     }
 
     // Ignore portal
-    if (!event.currentTarget.contains(event.target)) {
+    if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
       return;
     }
 

docs/data/data-grid/recipes-editing/SingleClickEditing.tsx

@@ -80,7 +80,10 @@ export default function SingleClickEditing() {
       }
 
       // Ignore portal
-      if (!event.currentTarget.contains(event.target as Element)) {
+      if (
+        (event.target as any).nodeType === 1 &&
+        !event.currentTarget.contains(event.target as Element)
+      ) {
         return;
       }
 

docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md

@@ -183,7 +183,10 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
         return;
       }
       // Check if the target is inside a Portal
-      if (!event.currentTarget.contains(event.target)) {
+      if (
+        (event.target as any).nodeType === 1 &&
+        !event.currentTarget.contains(event.target)
+      ) {
         event.defaultMuiPrevented = true;
       }
     }}

packages/grid/x-data-grid-pro/src/components/GridRowReorderCell.tsx

@@ -9,7 +9,7 @@ import {
   useGridSelector,
   getDataGridUtilityClass,
 } from '@mui/x-data-grid';
-import { gridEditRowsStateSelector } from '@mui/x-data-grid/internals';
+import { gridEditRowsStateSelector, isEventTargetInPortal } from '@mui/x-data-grid/internals';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
@@ -58,12 +58,7 @@ function GridRowReorderCell(params: GridRenderCellParams) {
       ): React.MouseEventHandler<HTMLDivElement> =>
       (event) => {
         // Ignore portal
-        // The target is not an element when triggered by a Select inside the cell
-        // See https://github.com/mui/material-ui/issues/10534
-        if (
-          (event.target as any).nodeType === 1 &&
-          !event.currentTarget.contains(event.target as Element)
-        ) {
+        if (isEventTargetInPortal(event)) {
           return;
         }
 

packages/grid/x-data-grid/src/components/GridRow.tsx

@@ -18,7 +18,7 @@ import { gridColumnsTotalWidthSelector } from '../hooks/features/columns/gridCol
 import { useGridSelector, objectShallowCompare } from '../hooks/utils/useGridSelector';
 import { GridRowClassNameParams } from '../models/params/gridRowParams';
 import { useGridVisibleRows } from '../hooks/utils/useGridVisibleRows';
-import { findParentElementFromClassName } from '../utils/domUtils';
+import { findParentElementFromClassName, isEventTargetInPortal } from '../utils/domUtils';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../colDef/gridCheckboxSelectionColDef';
 import { GRID_ACTIONS_COLUMN_TYPE } from '../colDef/gridActionsColDef';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../constants/gridDetailPanelToggleField';
@@ -202,12 +202,7 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
       ): React.MouseEventHandler<HTMLDivElement> =>
       (event) => {
         // Ignore portal
-        // The target is not an element when triggered by a Select inside the cell
-        // See https://github.com/mui/material-ui/issues/10534
-        if (
-          (event.target as any).nodeType === 1 &&
-          !event.currentTarget.contains(event.target as Element)
-        ) {
+        if (isEventTargetInPortal(event)) {
           return;
         }
 

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnGroupHeader.tsx

@@ -11,6 +11,7 @@ import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { GridColumnGroup } from '../../models/gridColumnGrouping';
 import { GridColumnGroupHeaderEventLookup } from '../../models/events';
 import { GridColumnGroupHeaderParams } from '../../models/params';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 
 interface GridColumnGroupHeaderProps {
   groupId: string | null;
@@ -129,7 +130,7 @@ function GridColumnGroupHeader(props: GridColumnGroupHeaderProps) {
     (eventName: keyof GridColumnGroupHeaderEventLookup) => (event: React.SyntheticEvent) => {
       // Ignore portal
       // See https://github.com/mui/mui-x/issues/1721
-      if (!event.currentTarget.contains(event.target as Element)) {
+      if (isEventTargetInPortal(event)) {
         return;
       }
       apiRef.current.publishEvent(eventName, renderParams, event as any);

packages/grid/x-data-grid/src/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -13,6 +13,7 @@ import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { GridColumnHeaderEventLookup } from '../../models/events';
+import { isEventTargetInPortal } from '../../utils/domUtils';
 
 interface GridColumnHeaderItemProps {
   colIndex: number;
@@ -111,7 +112,7 @@ function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
     (eventName: keyof GridColumnHeaderEventLookup) => (event: React.SyntheticEvent) => {
       // Ignore portal
       // See https://github.com/mui/mui-x/issues/1721
-      if (!event.currentTarget.contains(event.target as Element)) {
+      if (isEventTargetInPortal(event)) {
         return;
       }
       apiRef.current.publishEvent(

packages/grid/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts

@@ -23,6 +23,7 @@ import {
   unstable_gridHeaderFilteringMenuSelector,
 } from '../headerFiltering/gridHeaderFilteringSelectors';
 import { GridPipeProcessor, useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 
 function enrichPageRowsWithPinnedRows(
   apiRef: React.MutableRefObject<GridApiCommunity>,
@@ -522,7 +523,7 @@ export const useGridKeyboardNavigation = (
   const handleCellKeyDown = React.useCallback<GridEventListener<'cellKeyDown'>>(
     (params, event) => {
       // Ignore portal
-      if (!event.currentTarget.contains(event.target as Element)) {
+      if (isEventTargetInPortal(event)) {
         return;
       }
 

packages/grid/x-data-grid/src/hooks/features/rowSelection/useGridRowSelection.ts

@@ -27,6 +27,7 @@ import { GridStateInitializer } from '../../utils/useGridInitializeState';
 import { GridRowSelectionModel } from '../../../models';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
 import { gridClasses } from '../../../constants/gridClasses';
+import { isEventTargetInPortal } from '../../../utils/domUtils';
 
 const getSelectionModelPropValue = (
   selectionModelProp: DataGridProcessedProps['rowSelectionModel'],
@@ -459,7 +460,7 @@ export const useGridRowSelection = (
 
       // Ignore portal
       // Do not apply shortcuts if the focus is not on the cell root component
-      if (!event.currentTarget.contains(event.target as Element)) {
+      if (isEventTargetInPortal(event)) {
         return;
       }
 

packages/grid/x-data-grid/src/internals/index.ts

@@ -136,7 +136,11 @@ export {
   createSelectorMemoized,
   unstable_resetCreateSelectorCache,
 } from '../utils/createSelector';
-export { findParentElementFromClassName, getActiveElement } from '../utils/domUtils';
+export {
+  findParentElementFromClassName,
+  getActiveElement,
+  isEventTargetInPortal,
+} from '../utils/domUtils';
 export { isNavigationKey } from '../utils/keyboardUtils';
 export { clamp, isDeepEqual, isNumber, isFunction, isObject } from '../utils/utils';
 export { buildWarning } from '../utils/warning';

packages/grid/x-data-grid/src/utils/domUtils.ts

@@ -65,3 +65,15 @@ export const getActiveElement = (root: Document | ShadowRoot = document): Elemen
 
   return activeEl;
 };
+
+export function isEventTargetInPortal(event: React.SyntheticEvent) {
+  if (
+    // The target is not an element when triggered by a Select inside the cell
+    // See https://github.com/mui/material-ui/issues/10534
+    (event.target as any).nodeType === 1 &&
+    !event.currentTarget.contains(event.target as Element)
+  ) {
+    return true;
+  }
+  return false;
+}