[data grid] Fix renderContext calculation with scroll bounce / over-scroll

[lauri865]

• I have followed (at least) the PR section of the contributing guide.

Fixes an age old bug that has made the Datagrid look really broken on iOS devices.

Turns out there's a faulty logic that prevents renderContext from being recalculated when overscrolling – it skips calculating a new render context if the scroller is out of bounds, which results in blank rows intermittently. Fixed it by clamping within the known scroll area instead to avoid any unnecessary recalculations when bouncing, while still updating the render context when needed.

Steps to reproduce:

1. On iOS (not sure about Android) scroll down on any datagrid with sufficient rows (e.g. https://mui.com/x/), but also pull your finger to the right to pull the scroll area away from edges
2. Notice how new rows don't get rendered, and you end up with blank screen for a while

It's very annoying, since there's no directional scroll locks, so natural motion can easily trigger even the tiniest of overscrolls and this bug looks like this (no rows displayed while actively scrolling):
https://github.com/user-attachments/assets/d431e8f3-60c0-4914-b098-ed901195e38c

I also added in a small performance optimisation to reduce the number of calls to scrollTop/scrollLeft properties (centralised to triggerUpdateRenderContext), which can cause re-measurements when called in different times (depends on browser implementation).

Fixes #14930 (was never solved)

Preview: https://deploy-preview-16297--material-ui-x.netlify.app/x/react-data-grid/#pro-version

[mui-bot]

Deploy preview: https://deploy-preview-16297--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 068cf30

[lauri865]

There's a pre-existing issue with the below grid / test – it should not have a vertical scrollbar. The issue is that the grid footer grows and forces the main container to shrink. Main container should, however follow its children's height.

https://app.argos-ci.com/mui/mui-x/builds/29689/132441281

Added flexShrink: 0 to the main container, which fixes the issue. But not sure if something else will break now?

Edit: reverted, as it broke some tests. But the issue is there still if anyone wants to take a look, will leave it out of this PR. Alternatively, it could be beneficial for GridFooter to have a fixed height, as it can cause unnecessary resizings otherwise on mount.

[oliviertassinari]

This seems to do it:

Before

Screen.Recording.2025-01-27.at.15.53.17.mov

After:

Screen.Recording.2025-01-27.at.15.52.18.mov

---

On how we write tests to prevent future regressions, I'm not sure.

[KenanYusuf]

Thanks a lot for the PR @lauri865

[KenanYusuf]

LTR

ltr.mov

RTL

rtl.mov

Pinned columns

pinned-columns.mov

[github-actions]

Cherry-pick PRs will be created targeting branches: v7.x