fix: column menu not opening bug

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

@@ -76,7 +76,6 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
   const apiRef = useGridPrivateApiContext();
   const rootProps = useGridRootProps();
   const headerCellRef = React.useRef<HTMLDivElement>(null);
-  const [showColumnMenuIcon, setShowColumnMenuIcon] = React.useState(columnMenuOpen);
 
   const handleRef = useForkRef(headerCellRef, ref);
 
@@ -85,12 +84,6 @@ const GridGenericColumnHeaderItem = React.forwardRef(function GridGenericColumnH
     ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
   }
 
-  React.useEffect(() => {
-    if (!showColumnMenuIcon) {
-      setShowColumnMenuIcon(columnMenuOpen);
-    }
-  }, [showColumnMenuIcon, columnMenuOpen]);
-
   React.useLayoutEffect(() => {
     const columnMenuState = apiRef.current.state.columnMenu;
     if (hasFocus && !columnMenuState.open) {

packages/x-data-grid/src/components/menu/GridMenu.tsx

@@ -56,7 +56,7 @@ const GridMenuRoot = styled(Popper, {
 
 export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
   open: boolean;
-  target: HTMLElement | null;
+  target: HTMLElement | null | { current: HTMLElement | null };
   onClose: (event?: Event) => void;
   position?: MenuPosition;
   onExited?: GrowProps['onExited'];
@@ -88,7 +88,7 @@ function GridMenu(props: GridMenuProps) {
   React.useEffect(() => {
     // Emit menuOpen or menuClose events
     const eventName = open ? 'menuOpen' : 'menuClose';
-    apiRef.current.publishEvent(eventName, { target });
+    apiRef.current.publishEvent(eventName, { target: getTarget(target) });
   }, [apiRef, open, target]);
 
   const handleExited = (popperOnExited: (() => void) | undefined) => (node: HTMLElement) => {
@@ -102,7 +102,7 @@ function GridMenu(props: GridMenuProps) {
   };
 
   const handleClickAway: ClickAwayListenerProps['onClickAway'] = (event) => {
-    if (event.target && (target === event.target || target?.contains(event.target as Node))) {
+    if (event.target && (getTarget(target) === event.target || getTarget(target)?.contains(event.target as Node))) {
       return;
     }
     onClose(event);
@@ -135,6 +135,11 @@ function GridMenu(props: GridMenuProps) {
   );
 }
 
+// TODO(v8): Simplify the type of `target` to just a ref
+export function getTarget(target: HTMLElement | null | { current: HTMLElement | null }) {
+  return (target as any)?.current ?? target;
+}
+
 GridMenu.propTypes = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { unstable_useEventCallback as useEventCallback, HTMLElementType } from '@mui/utils';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
-import { GridMenu, GridMenuProps } from '../GridMenu';
+import { GridMenu, GridMenuProps, getTarget } from '../GridMenu';
 
 export interface GridColumnHeaderMenuProps {
   columnMenuId?: string;
@@ -11,7 +11,7 @@ export interface GridColumnHeaderMenuProps {
   contentComponentProps?: any;
   field: string;
   open: boolean;
-  target: HTMLElement | null;
+  target: HTMLElement | null | { current: HTMLElement | null };
   onExited?: GridMenuProps['onExited'];
 }
 
@@ -33,14 +33,14 @@ function GridColumnHeaderMenu({
       // Prevent triggering the sorting
       event.stopPropagation();
 
-      if (target?.contains(event.target as HTMLElement)) {
+      if (getTarget(target)?.contains(event.target as HTMLElement)) {
         return;
       }
     }
     apiRef.current.hideColumnMenu();
   });
 
-  if (!target || !colDef) {
+  if (!colDef) {
     return null;
   }
 

packages/x-data-grid/src/hooks/features/columnMenu/useGridColumnMenu.ts

@@ -48,7 +48,6 @@ export const useGridColumnMenu = (
           };
         });
         apiRef.current.hidePreferences();
-        apiRef.current.forceUpdate();
       }
     },
     [apiRef, logger],