[data grid] The right 1/4 of the "Select all rows" Checkbox is not clickable

[TonyBrobston]

Steps to reproduce

Link to live example: https://mui.com/x/react-data-grid/

Steps:

1. Go to any MUI DataGrid with checkboxSelection enabled.
2. Hover the "Select all rows" checkbox in the top left of the DataGrid, in the same row as the column titles.
3. Observe that when you hover slightly outside the checkbox to the top, left, or bottom, you get cursor pointer (the hand icon) and are able to click.
4. Observe that when you hover slightly outside the checkbox to the right, you do NOT get the cursor pointer (the hand icon) and you are NOT able to click.
5. Observe that all other checkboxes in the first column are hoverable and clickable to each side of the checkbox.

Current behavior

When I hover the right 1/4 of the checkbox area (checkbox + the area around it), it is not clickable and does not show cursor pointer.

Expected behavior

If I hover slightly outside the checkbox to right I should see cursor pointer (the hand icon) and be able to click the checkbox.

Context

We are trying to produce the best user experience that we can. If one checkbox allows you to click slightly outside of the checkbox, in the checkbox area (I'm not sure what you call this), then it seems that all checkboxes should have the same behavior.

Your environment

npx @mui/envinfo

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

Search keywords: data grid select all rows checkbox not clickable
Order ID: 80452

[michelengelen]

Thanks for raising an issue @TonyBrobston
I guess this comes from the separator bounding box overlapping the clickable area of the checkbox in the header column.

I will add this to the board for the team to have a look.

[TonyBrobston]

@michelengelen Thanks for the reply.