[data grid] How to deselect Row in onRowClick callback in DataGridPro?

[MarcusKuehn]

The problem in depth

https://codesandbox.io/p/sandbox/admiring-thunder-m5nf8t

We wanted to build a small DataGrid, where you can select a Row and deselect it by simply left clicking. We thought we can just manipulate the selection with the details.api but found that we are than not able to deselect the row whatsoever (even with Ctrl+leftClick).

Is it even possible to manipulate the default Behaviour of the DataGrid that you can select/deselect a row by just left clicking?

Your environment

`npx @mui/envinfo`

System:
    OS: macOS 15.0.1
  Binaries:
    Node: 20.15.0 - ~/Library/pnpm/node
    npm: 10.7.0 - ~/Library/pnpm/npm
    pnpm: 9.11.0 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 129.0.6668.91
    Edge: 129.0.2792.79
    Safari: 18.0.1
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/icons-material: ^6.1.3 => 6.1.3 
    @mui/lab: 6.0.0-beta.10 => 6.0.0-beta.10 
    @mui/material: ^6.1.3 => 6.1.3 
    @mui/x-charts-pro: 7.0.0-beta.3 => 7.0.0-beta.3 
    @mui/x-data-grid-pro: 7.19.0 => 7.19.0 
    @mui/x-date-pickers-pro: 7.19.0 => 7.19.0 
    @mui/x-license: ^7.18.0 => 7.18.0 
    @mui/x-tree-view-pro: ^7.19.0 => 7.19.0 
    @toolpad/core: ^0.7.0 => 0.7.0 
    @types/react: ^18.3.10 => 18.3.10 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.0 => 18.3.1 
    typescript: ^5.6.3 => 5.6.3 

Search keywords: DataGrid
Order ID: 85157

[cherniavskii]

Hi @MarcusKuehn
It seems that after you manipulate row selection in the onRowClick handler, the default handler kicks in and keeps the row selected.
For custom selection behavior, I would recommend using the controlled row selection model.
Here is a working demo: https://codesandbox.io/p/sandbox/old-firefly-m4xw49
Is this what you're looking for?

[cherniavskii]

I feel like it would make sense to make the row deselection on click a default behavior 🤔
What do you think @mui/xgrid ?

[MarcusKuehn]

Hi @MarcusKuehn It seems that after you manipulate row selection in the onRowClick handler, the default handler kicks in and keeps the row selected. For custom selection behavior, I would recommend using the controlled row selection model. Here is a working demo: https://codesandbox.io/p/sandbox/old-firefly-m4xw49 Is this what you're looking for?

This is exactly what we were looking for. Thanks for the fast reply.

[michelengelen]

I feel like it would make sense to make the row deselection on click a default behavior 🤔 What do you think @mui/xgrid ?

Since everybody seemingly agrees I'll add this to the board! 👍🏼

[cherniavskii]

Added to #13188