[DataGrid] Fix GridOverlays bypassing pointer events (#5674)

mui · Aug 12, 2022 · 2b10cdd · 2b10cdd
1 parent f0231d3
commit 2b10cdd
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx b/packages/grid/x-data-grid/src/components/base/GridOverlays.tsx
@@ -44,8 +44,6 @@ function GridOverlayWrapper(props: React.PropsWithChildren<{}>) {
         position: 'absolute',
         top: headerHeight,
         bottom: height === 'auto' ? 0 : undefined,
-        zIndex: 4, // should be above pinned columns, pinned rows and detail panel
-        pointerEvents: 'none',
       }}
       {...props}
     />

diff --git a/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx b/packages/grid/x-data-grid/src/components/containers/GridOverlay.tsx
@@ -29,8 +29,13 @@ const GridOverlayRoot = styled('div', {
   slot: 'Overlay',
   overridesResolver: (props, styles) => styles.overlay,
 })(({ theme }) => ({
-  display: 'flex',
+  position: 'absolute',
+  top: 0,
+  zIndex: 4, // should be above pinned columns, pinned rows and detail panel
+  width: '100%',
   height: '100%',
+  pointerEvents: 'none',
+  display: 'flex',
   alignSelf: 'center',
   alignItems: 'center',
   justifyContent: 'center',