[data grid] filter and columns poppers incorrectly positioned when using a toolbar

[jcrang]

Steps to reproduce

Link to live example: (required) https://codesandbox.io/p/sandbox/relaxed-frost-vsxqk5?file=%2Fsrc%2FDemo.tsx

Steps:

1. Click "Columns" or "Filters"

Note: this only occurs when using a toolbar. Poppers are correctly positioned when not using a toolbar.

Current behavior

Position of popper obscures headers

Expected behavior

Position of popper is below headers (as in MUI X 6): https://codesandbox.io/p/sandbox/great-tree-hqkwng?file=%2Fsrc%2FDemo.tsx

Context

No response

Your environment

No response

Search keywords: datagrid toolbar popper

[michelengelen]

Hey @jcrang Thanks for raising this. It is happening due to a change in the layout.

The fix would be a rather easy one, so I am opening it up as a good first issue. To get the person started picking this up here is a diff with a fix:

diff --git a/packages/x-data-grid/src/components/containers/GridRoot.tsx b/packages/x-data-grid/src/components/containers/GridRoot.tsx
index d141c5a0f..62a777499 100644
--- a/packages/x-data-grid/src/components/containers/GridRoot.tsx
+++ b/packages/x-data-grid/src/components/containers/GridRoot.tsx
@@ -45,15 +45,9 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };

-const GridPanelAnchor = styled('div')({
-  position: 'absolute',
-  top: `var(--DataGrid-headersTotalHeight)`,
-  left: 0,
-});
-
 const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRoot(props, ref) {
   const rootProps = useGridRootProps();
-  const { children, className, ...other } = props;
+  const { className, ...other } = props;
   const apiRef = useGridPrivateApiContext();
   const density = useGridSelector(apiRef, gridDensitySelector);
   const rootElementRef = apiRef.current.rootElementRef;
@@ -82,10 +76,7 @@ const GridRoot = React.forwardRef<HTMLDivElement, GridRootProps>(function GridRo
       className={clsx(className, classes.root)}
       ownerState={ownerState}
       {...other}
-    >
-      <GridPanelAnchor role="presentation" data-id="gridPanelAnchor" />
-      {children}
-    </GridRootStyles>
+    />
   );
 });

diff --git a/packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx b/packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx
index 88603b41c..fad36864b 100644
--- a/packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx
+++ b/packages/x-data-grid/src/components/virtualization/GridTopContainer.tsx
@@ -4,6 +4,12 @@ import { styled } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/utils';
 import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';

+const GridPanelAnchor = styled('div')({
+  position: 'absolute',
+  top: `var(--DataGrid-headersTotalHeight)`,
+  left: 0,
+});
+
 const useUtilityClasses = () => {
   const slots = {
     root: ['topContainer'],
@@ -29,13 +35,17 @@ const Element = styled('div')({
 });

 export function GridTopContainer(props: React.HTMLAttributes<HTMLDivElement>) {
+  const { children, ...otherProps } = props;
   const classes = useUtilityClasses();

   return (
     <Element
-      {...props}
-      className={clsx(classes.root, props.className, gridClasses['container--top'])}
+      {...otherProps}
+      className={clsx(classes.root, otherProps.className, gridClasses['container--top'])}
       role="presentation"
-    />
+    >
+      {children}
+      <GridPanelAnchor role="presentation" data-id="gridPanelAnchor" />
+    </Element>
   );
 }

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@jcrang: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.