[data grid] Overlapping scrollbar prevents row/cell click

[Simencas]

Steps to reproduce

Steps:

1. Open this link to live example: https://codesandbox.io/p/sandbox/boring-https-vjwz3x
2. You need a laptop without external mouse connected to get overlapping scrollbars (may also need to adjust OS/browser settings)
3. Click any cell on the bottom/last row through the scrollbar element

Current behavior

It is not possible to click and focus cells on the bottom row when clicking in the render zone of the horizontal scrollbar, even though the scrollbar is invisible.

Expected behavior

It should be possible to click and focus cells behind the horizontal scrollbar when the scrollbar is invisible (user not actively scrolling). This worked on Datagrid version 6.

Context

The current behaviour makes it almost impossible to interact with cells on the bottom row when the row height is small.

Your environment

npx @mui/envinfo

Used browsers: Chrome and Firefox

  System:
    OS: macOS 15.4
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 136.0.7103.93
    Edge: Not Found
    Safari: 18.4
  npmPackages:
    @emotion/react: ^11.9.0 => 11.13.3 
    @emotion/styled: ^11.8.1 => 11.13.0 
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.17.1 
    @mui/icons-material: ^5.17.1 => 5.17.1 
    @mui/material: ^5.17.1 => 5.17.1 
    @mui/private-theming:  5.17.1 
    @mui/styled-engine:  5.16.14 
    @mui/styles: ^5.17.1 => 5.17.1 
    @mui/system: ^5.17.1 => 5.17.1 
    @mui/types:  7.2.24 
    @mui/utils:  7.1.0 
    @mui/x-data-grid:  8.2.0 
    @mui/x-data-grid-premium: latest => 8.2.0 
    @mui/x-data-grid-pro:  8.2.0 
    @mui/x-date-pickers:  7.22.0 
    @mui/x-date-pickers-pro: ^7.22.0 => 7.22.0 
    @mui/x-internals:  8.2.0 
    @mui/x-license: ^7.21.0 => 7.21.0 
    @mui/x-telemetry:  8.2.0 
    @mui/x-tree-view: ^6.17.0 => 6.17.0 
    @types/react: ^17.0.83 => 17.0.85 
    react: 17.0.1 => 17.0.1 
    react-dom: 17.0.1 => 17.0.1 
    typescript: ~5.4.0 => 5.4.5

Search keywords: Scrollbar prevents cell row click overlap

Order ID: 98383

[KenanYusuf]

Hi @Simencas, thanks for raising the issue.

This is a flaw of our virtual scroller implementation, and there may be some ways we can improve the UX.

I will add it to our board to be looked at by the team.

---

I took a look at how others deal with this issue — AG Grid detect if the browser has hidden scrollbars and hide the scroll area. It would be worth us exploring a similar solution:

• 
• https://github.com/ag-grid/ag-grid/blob/2ce78ee0d2e4ed78d46d3124ad5cbe9db13c8e7d/packages/ag-grid-community/src/gridBodyComp/fakeVScrollComp.ts#L47
• https://github.com/ag-grid/ag-grid/blob/latest/packages/ag-grid-community/src/utils/browser.ts#L144-L149