[DataGrid] Don't select the row when clicking on an item in the actions column type

[m4theushw]

Fixes #891 (comment)

Before: https://codesandbox.io/s/columntypesgrid-material-demo-forked-6codp?file=/demo.tsx

After: https://codesandbox.io/s/columntypesgrid-material-demo-forked-nrrs5?file=/demo.tsx

Click on any item from the last column and check the console.

[flaviendelangle]

I'm trying to do the same thing with the expand / collapse column of the Tree Data
And you seem to have the same limitation.
Try to open the action menu then close it by clicking outside
You are then in a state were can can't navigate with the keyboard.
The DataGrid state tells that the cell is focused but the focused DOM element is not the cell (it's the whole page in your case), to the onKeyDown of GridCell is not called when pressing the arrow keys.

[m4theushw]

@flaviendelangle This problem comes from here:

https://github.com/mui-org/material-ui-x/blob/998b4024d2793b673baa9f410e8b4c08c6dd7811/packages/grid/_modules_/grid/hooks/features/keyboard/useGridKeyboard.ts#L58-L60

The idea when this check was added was to ignore any event coming from a portaled component, e.g. a Select. At that time, a cell not in edit mode couldn't have focusable elements inside it, but now we have. This handler should be improved. I opened #2880 to track this.

In your case, for the expand/collapse button, you can manually publish the event that triggers the cell navigation:

https://github.com/mui-org/material-ui-x/blob/998b4024d2793b673baa9f410e8b4c08c6dd7811/packages/grid/_modules_/grid/components/columnSelection/GridCellCheckboxRenderer.tsx#L65-L67

[NemanjaTck]

Data Grid Pro version 5.4.0 introduced this problem again. Both row click event is activated together with the showMenu. Please take a look into this. We had to lock version in our package.json to 5.2.1 to make it work.

[m4theushw]

@NemanjaTck In #3492 we changed to not stop the propagation of click events. This change was to fix #3489. The problem that #2862 fixes is to not mark a row as selected when clicking in action. Despite this change, onRowClick will still be called, same for onCellClick. You can check the event.currentTarget provided to this callback and if the DOM element has data-field="actions" then do nothing. If this doesn't work I would suggest to open another issue so we can discuss better your use case.

https://github.com/mui-org/material-ui-x/blob/cbe570cad533397324d7589e6a7e584d54e5ed4d/packages/grid/_modules_/grid/hooks/features/selection/useGridSelection.ts#L338-L342