[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:

• [data grid] single click on IconButton inside data grid not works #13480
• [data grid] I need to double click in the grid on action items in order to fire the handler #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?