[DataGrid] Fix column menu scroll close

packages/x-data-grid/src/components/menu/columnMenu/GridColumnMenuContainer.tsx

@@ -32,13 +32,26 @@ const GridColumnMenuContainer = forwardRef<HTMLUListElement, GridColumnMenuConta
       [hideMenu],
     );
 
+    const handleMenuScrollCapture = React.useCallback(
+      (event: React.WheelEvent | React.TouchEvent) => {
+        if (!event.currentTarget.contains(event.target as Node)) {
+          return;
+        }
+
+        event.stopPropagation();
+      },
+      [],
+    );
+
     return (
       <StyledMenuList
         as={rootProps.slots.baseMenuList}
         id={id}
         className={clsx(gridClasses.menuList, className)}
         aria-labelledby={labelledby}
         onKeyDown={handleListKeyDown}
+        onWheel={handleMenuScrollCapture}
+        onTouchMove={handleMenuScrollCapture}
         autoFocus={open}
         {...other}
         ref={ref}

packages/x-data-grid/src/tests/columnHeaders.DataGrid.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createRenderer, screen, waitFor, within } from '@mui/internal-test-utils';
+import { createRenderer, fireEvent, screen, waitFor, within } from '@mui/internal-test-utils';
 import { expect } from 'chai';
 import { DataGrid } from '@mui/x-data-grid';
 import { getColumnHeaderCell, getColumnHeadersTextContent } from 'test/utils/helperFn';
@@ -132,6 +132,43 @@ describe('<DataGrid /> - Column headers', () => {
         expect(screen.queryByRole('menu')).to.equal(null);
       });
     });
+
+    it('should prevent wheel scroll event from closing the menu when scrolling within the menu', async () => {
+      const { user } = render(
+        <div style={{ width: 300, height: 500 }}>
+          <DataGrid {...baselineProps} columns={[{ field: 'brand' }]} />
+        </div>,
+      );
+
+      await user.click(within(getColumnHeaderCell(0)).getByLabelText('brand column menu'));
+      const menu = screen.getByRole('menu');
+
+      fireEvent.wheel(menu);
+
+      await waitFor(() => {
+        expect(screen.queryByRole('menu')).not.to.equal(null);
+      });
+    });
+
+    it('should close the column menu when the grid is scrolled', async () => {
+      const { user } = render(
+        <div style={{ height: 300, width: 300 }}>
+          <DataGrid
+            rows={Array.from({ length: 50 }, (_, id) => ({ id, name: id }))}
+            columns={[{ field: 'brand' }]}
+          />
+        </div>,
+      );
+
+      await user.click(within(getColumnHeaderCell(0)).getByLabelText('brand column menu'));
+
+      const scroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
+      fireEvent.wheel(scroller, { deltaY: 120 });
+
+      await waitFor(() => {
+        expect(screen.queryByRole('menu')).to.equal(null);
+      });
+    });
   });
 
   it("should use 'headerName' as the aria-label for the menu icon button", async () => {