[data grid] Preference Panel state is not updated

[vanderAries]

Steps to reproduce

Use this code for custom toolbar:

import { IconButton } from "@mui/material";
import {
  GridColumnIcon,
  GridPreferencePanelsValue,
  GridToolbarContainer,
  useGridApiContext,
} from "@mui/x-data-grid-premium";

export const Toolbar = () => {
  const apiRef = useGridApiContext();
  const openColumnPanelHandler = () => {
    if (apiRef.current.state.preferencePanel.open) {
      apiRef.current.hidePreferences();
    } else {
      apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
    }
  };
  return (
    <GridToolbarContainer>
      <IconButton
        data-cy="columns-preferences-button"
        onClick={openColumnPanelHandler}
      >
        <GridColumnIcon />
      </IconButton>
    </GridToolbarContainer>
  );
};

Add Toolbar to DataGrid as toolbar slot.

Current behavior

I'm using IconButton with GridColumnIcon, but it could be any button.
After opening preferencesPanel with apiRef in DataGrid v7, state (apiRef.current.state.preferencePanel.open) is not updated and it cannot be closed with clicking the button again. It's always showing open: false. It's a regression.

Expected behavior

apiRef.current.state.preferencePanel.open should be updated after opening preferencesPanel.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 22.13.1 - C:\Program Files\nodejs\node.EXE
    npm: 11.2.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 10.5.2 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: Not Found
    Edge: Chromium (128.0.2739.79)
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  6.4.8 
    @mui/material: ^6.4.8 => 6.4.8 
    @mui/private-theming:  6.4.8 
    @mui/styled-engine:  6.4.8 
    @mui/system:  6.4.8
    @mui/types:  7.2.24
    @mui/utils:  6.4.8
    @mui/x-data-grid:  7.28.1
    @mui/x-data-grid-premium: ^7.28.1 => 7.28.1
    @mui/x-data-grid-pro:  7.28.1
    @mui/x-internals:  7.28.0
    @mui/x-license:  7.28.0
    @types/react: ^19.0.10 => 19.0.12
    react: ^19.0.0 => 19.0.0
    react-dom: ^19.0.0 => 19.0.0
    typescript: ~5.7.2 => 5.7.3

Search keywords: preferencepanel, datagrid, state

[michelengelen]

Hey @vanderAries ... the problem isn't that the state is not getting updated, but rather that the popper closes first, hence updating the state to false, and then propagates the click to the button, which again updates the state to true. To prevent this you would need to intercept the event on the popper component.

But IMHO I would wait for v8 to hit as we have done a great deal on this component. Check out the docs here: https://next.mui.com/x/react-data-grid/components/toolbar/

[vanderAries]

Hey @michelengelen, thanks for response. Unfotunately, we're using internal library, that is built on top of MUI, and we have to stick to their releases. Even if there will be new MUI version, we could stuck with v7 on production for a while. Could You give me an example how to achieve it with events? I already tried something like this:

import { IconButton } from "@mui/material";
import {
  GridColumnIcon,
  GridPreferencePanelsValue,
  GridToolbarContainer,
  useGridApiContext,
} from "@mui/x-data-grid-premium";
import { useEffect, useState } from "react";

export const Toolbar = () => {
  const [panelOpen, setPanelOpen] = useState(false)
  const apiRef = useGridApiContext();

 useEffect(() => {
    const unsubscribe = apiRef.current.subscribeEvent('preferencePanelOpen', () => setPanelOpen(true));

    return unsubscribe;
  }, [apiRef]);

 useEffect(() => {
    const unsubscribe = apiRef.current.subscribeEvent('preferencePanelClose', () => setPanelOpen(false));

    return unsubscribe;
  }, [apiRef]);

  const openColumnPanelHandler = () => {
    if (panelOpen) {
      apiRef.current.hidePreferences();
    } else {
      apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
    }
  };

  return (
    <GridToolbarContainer>
      <IconButton
        data-cy="columns-preferences-button"
        onClick={openColumnPanelHandler}
      >
        <GridColumnIcon />
      </IconButton>
    </GridToolbarContainer>
  );
};

But it keeps reopening it immediately when I'm clicking on button.

[michelengelen]

Hey @michelengelen, thanks for response. Unfotunately, we're using internal library, that is built on top of MUI, and we have to stick to their releases. Even if there will be new MUI version, we could stuck with v7 on production for a while. Could You give me an example how to achieve it with events? I already tried something like this:

import { IconButton } from "@mui/material";
import {
  GridColumnIcon,
  GridPreferencePanelsValue,
  GridToolbarContainer,
  useGridApiContext,
} from "@mui/x-data-grid-premium";
import { useEffect, useState } from "react";

export const Toolbar = () => {
  const [panelOpen, setPanelOpen] = useState(false)
  const apiRef = useGridApiContext();

 useEffect(() => {
    const unsubscribe = apiRef.current.subscribeEvent('preferencePanelOpen', () => setPanelOpen(true));

    return unsubscribe;
  }, [apiRef]);

 useEffect(() => {
    const unsubscribe = apiRef.current.subscribeEvent('preferencePanelClose', () => setPanelOpen(false));

    return unsubscribe;
  }, [apiRef]);

  const openColumnPanelHandler = () => {
    if (panelOpen) {
      apiRef.current.hidePreferences();
    } else {
      apiRef.current.showPreferences(GridPreferencePanelsValue.columns);
    }
  };

  return (
    <GridToolbarContainer>
      <IconButton
        data-cy="columns-preferences-button"
        onClick={openColumnPanelHandler}
      >
        <GridColumnIcon />
      </IconButton>
    </GridToolbarContainer>
  );
};

But it keeps reopening it immediately when I'm clicking on button.

Is the data grid included in that internal library? or is it just the @mui/material package that is included?

You can just add this to the IconButton:

onPointerUp={(event) => {
  if (preferencePanel.open) {
    event.stopPropagation();
  }
}}

Then it should work as expected!

Sry for the late answer! 🙇🏼

[vanderAries]

Yes, data grid is included in this library. Willt try that in a minute!