Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Avoid re-rendering all cells on column change #12980

Merged
merged 13 commits into from
May 30, 2024
Prev Previous commit
Next Next commit
Revert "fix: column menu not opening bug"
This reverts commit 74bb524.
  • Loading branch information
romgrk committed May 22, 2024
commit 2f325efbb5e237537ea5c2bf0f85a72224f00efa
Original file line number Diff line number Diff line change
@@ -76,6 +76,7 @@ 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);

@@ -84,6 +85,12 @@ 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) {
11 changes: 3 additions & 8 deletions packages/x-data-grid/src/components/menu/GridMenu.tsx
Original file line number Diff line number Diff line change
@@ -56,7 +56,7 @@ const GridMenuRoot = styled(Popper, {

export interface GridMenuProps extends Omit<PopperProps, 'onKeyDown' | 'children'> {
open: boolean;
target: HTMLElement | null | { current: HTMLElement | null };
target: 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: getTarget(target) });
apiRef.current.publishEvent(eventName, { target });
}, [apiRef, open, target]);
romgrk marked this conversation as resolved.
Show resolved Hide resolved

const handleExited = (popperOnExited: (() => void) | undefined) => (node: HTMLElement) => {
@@ -102,7 +102,7 @@ function GridMenu(props: GridMenuProps) {
};

const handleClickAway: ClickAwayListenerProps['onClickAway'] = (event) => {
if (event.target && (getTarget(target) === event.target || getTarget(target)?.contains(event.target as Node))) {
if (event.target && (target === event.target || target?.contains(event.target as Node))) {
return;
}
onClose(event);
@@ -135,11 +135,6 @@ 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 |
Original file line number Diff line number Diff line change
@@ -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, getTarget } from '../GridMenu';
import { GridMenu, GridMenuProps } from '../GridMenu';

export interface GridColumnHeaderMenuProps {
columnMenuId?: string;
@@ -11,7 +11,7 @@ export interface GridColumnHeaderMenuProps {
contentComponentProps?: any;
field: string;
open: boolean;
target: HTMLElement | null | { current: HTMLElement | null };
target: HTMLElement | null;
onExited?: GridMenuProps['onExited'];
}

@@ -33,14 +33,14 @@ function GridColumnHeaderMenu({
// Prevent triggering the sorting
event.stopPropagation();

if (getTarget(target)?.contains(event.target as HTMLElement)) {
if (target?.contains(event.target as HTMLElement)) {
return;
}
}
apiRef.current.hideColumnMenu();
});

if (!colDef) {
if (!target || !colDef) {
return null;
}

Original file line number Diff line number Diff line change
@@ -48,6 +48,7 @@ export const useGridColumnMenu = (
};
});
apiRef.current.hidePreferences();
apiRef.current.forceUpdate();
}
},
[apiRef, logger],