onCellClick is not triggered on last row cell (extend row full width cell)

[ak-mid]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The last cell which only extends the row to reach full width isn't triggering the onCellClick callback.
In my layout most data grids are full width so in cases with only a few columns the last cell might be the biggest and therefore it's possible that a user clicks on it.

Why I don't use onRowClick:
Previously I was redirecting my users onRowClick to a details view of the grid entry.
Due to a change onRowClick started to also triggered when selecting a grid entry via checkbox #3805 so I needed to replace it with onCellClick to imitate the old behavior.

Expected behavior 🤔

The last cell should also triggering onCellClick callback.

Steps to reproduce 🕹

Steps:

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

35878

[DanailH]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[ak-mid]

I've added a codesandbox example here:

https://codesandbox.io/s/datagrid-v5-quick-start-forked-u47dhv?file=/src/App.tsx

I activated disableExtendRowFullWidth so it's more visible what I'm talking about.
It's about the cells on the right side of the disableExtendRowFullWidth border.

When you click on one of those cells onCellClick is not triggered. In my codesandbox example the alert box is not showing up.

[alexfauquette]

For the long term, it sounds this issue is related to #4308 This problem would not occur if the last column was extended to fill the remaining space

For a faster solution, the component you want to click on is not a cell so it should not trigger the cellClick. Otherwise, it would impact also the focus and maybe other features. And it would be misleading for other users that onCellClick is called when clicking outside of a cell.

I can propose you some work arounds

• If your goal is to let users move to a detailed view the easiest way is to add an column with type action wich contains a button redirecting to the detailed view
• Your problem with rowClick has been fixed. interactive column type does not trigger rowClick since [DataGrid] Stop calling onRowClick when clicking in cells with interactive elements #3929
• You can use onRowClick and check from which column the event comes from using CSS selector as follow

[ak-mid]

For the long term, it sounds this issue is related to #4308 This problem would not occur if the last column was extended to fill the remaining space

That would probably the best solution.

Your problem with rowClick has been fixed.

I didn't notice that - Thanks for the hint! I switched back to onRowClick because adding an action button to redirect the user IMO would be bad usability as the button might be no visible in the viewport (especially on small resolutions).