[data grid] GridActionsCellItem needs to be clicked twice to fire onClick only if using Iconify icon

[brilliantinsane]

Steps to reproduce

Steps:

1. Open this link to live example: https://stackblitz.com/edit/react-n7urnk5j?file=Demo.tsx
2. Open the console and check for the "clicked" log when clicking in the middle of an "eye" icon from Iconify
3. Comment OUT the Iconify icon and comment IN the MUI icon and observe the logs

Current behavior

Currently, when using Iconify icon it needs to be pressed twice in order to fire the on-click event.

Expected behavior

It should work on the first click, no need to click twice.

Context

I went to https://mui.com/x/react-data-grid/column-definition/#column-types and on the first grid that showed I clicked Edit in StackBlitz, installed Iconify, and modified the code to showcase the issue.

Your environment

npx @mui/envinfo

   System:
    OS: macOS 15.3
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 9.13.2 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 133.0.6943.127
    Edge: Not Found
    Safari: 18.3
  npmPackages:
    @emotion/react: ^11.13.5 => 11.14.0
    @emotion/styled: ^11.13.5 => 11.14.0
    @mui/base:  5.0.0-beta.69
    @mui/core-downloads-tracker:  6.4.4
    @mui/icons-material: ^6.4.4 => 6.4.4
    @mui/lab: ^6.0.0-beta.17 => 6.0.0-beta.27
    @mui/material: ^6.4.5 => 6.4.4
    @mui/private-theming:  6.4.3
    @mui/styled-engine:  6.4.3
    @mui/system:  6.4.3
    @mui/types:  7.2.21
    @mui/utils:  6.4.3
    @mui/x-charts: ^7.27.0 => 7.27.0
    @mui/x-charts-vendor:  7.20.0
    @mui/x-data-grid: ^7.27.0 => 7.27.0
    @mui/x-data-grid-premium: ^7.27.0 => 7.27.0
    @mui/x-data-grid-pro:  7.27.0
    @mui/x-date-pickers: ^7.27.0 => 7.27.0
    @mui/x-date-pickers-pro: ^7.27.0 => 7.27.0
    @mui/x-internals:  7.26.0
    @mui/x-license:  7.26.0
    @types/react: ^18.3.12 => 18.3.18
    react: ^18.3.1 => 18.3.1
    react-dom: ^18.3.1 => 18.3.1
    typescript: ^5.7.2 => 5.7.3

Search keywords: data grid, GridActionsCellItem, action button, click twice

[michelengelen]

This has been reported a few times already. I found 2 similar issues:

• https://github.com/mui/mui-x/issues/13480
• https://github.com/mui/mui-x/issues/12367

I can also confirm this. Clicking directly on the icon does not work the first time. However clicking the edge of the button, so past the icon, works.

I'll add this to the board. 👍🏼

[jyash97]

@michelengelen

Can I take a stab at these?

[michelengelen]

@michelengelen

Can I take a stab at these?

Sure... go ahead! 💪🏻

[mleister97]

Any updates?

[limbik-michaux]

Hi, this problem appears to persist still. I have the following code, but the buttons only fire the event handler on the second click. This code is part of my datagrid that is suspect and not working:

renderCell: (organization) => (
        <>
          <GridActionsCellItem
            icon={
              <IconButton component="a" href={`/admin/organizations/${organization.row.uid}`}>
                <Iconify icon="solar:pen-bold" />
              </IconButton>
            }
            label={`Edit ${organization.row.name}`}
          />
          <GridActionsCellItem
            icon={
              <IconButton component="a" onClick={() => handleDeleteOrganization(organization.row.uid)}>
                <Iconify icon="solar:trash-bin-trash-bold" />
              </IconButton>
            }
            label={`Delete ${organization.row.name}`}
          />
        </>
      ),

[alexvoedi]

After clicking around for a few minutes, the problem seems to be fixed when I set pointer-events: none to the Iconify component.

This is however just a workaround.

[michelengelen]

@KenanYusuf how about we apply the workaround mentioned by @alexvoedi as a default to the item?

we could do something similar to this:

--- a/packages/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -637,6 +637,9 @@ export const GridRootStyles = styled('div', {
       display: 'inline-flex',
       alignItems: 'center',
       gridGap: vars.spacing(1),
+      '> button > *': {
+        pointerEvents: 'none',
+      }
     },
     [`& .${c.rowReorderCell}`]: {
       display: 'inline-flex',

[alexojo2020]

@brilliantinsane
To ensure that the GridActionsCellItem receives the onClick event properly, I made the SVG icon non-interactive by setting pointerEvents: 'none' on the wrapping Box. This way, the icon becomes “click-through,” and the click event reaches the parent button.

import { Icon } from '@iconify/react';
import Box from '@mui/material/Box';

const IconWrapper = forwardRef(({ icon, width = 20, sx, ...props }, ref) => (

    <Box
        ssr
        component={Icon}
        className="icon-wrapper"
        icon={icon}
        ref={ref}
        sx={{
            width,
            height: width,
            flexShrink: 0,
            display: 'inline-flex',
            pointerEvents: 'none',
            ...sx,
          }}
        {...props}
    />
));

---

{
        field: 'actions',
        type: 'actions',
        headerName: 'Actions',
        width: 100,
        sortable: false,
        filterable: false,
        disableColumnMenu: true,
        getActions: (params) => [
            <GridActionsCellItem
                icon={<IconWrapper icon="solar:pen-bold" />}
                label="Edit"
                onClick={(event) => {
                    console.log('🔥 onClick ejecutado!', params.row); // 🔍 Debug
                    onEditRow(params.row);
                }}
                showInMenu={false}
            />
        ],
    }

[dangnhdev]

I'm using onMouseDown={(e) => e.stopPropagation()} as a workaround 😅

<GridActionsCellItem
        icon={<Iconify icon="solar:file-text-bold" />}
        label="View JSON"
        onMouseDown={(e) => e.stopPropagation()}
        onClick={() => {
          console.log('clicked')
          onShowJson(params.row)
        }}
        showInMenu={false}
/>