[data grid] Extra space on the bottom of grid when loading new records and scrolling back up

[swensel]

Steps to reproduce

I had filed a separate issue https://github.com/mui/mui-x/issues/13301 recently. This bug is a different case.

The grid that's having an issue is using the infinite loading feature. My team has noticed that when upgrading from @mui/x-data-grid-pro v5.12.0 to v7.5.1, that there's a lot of extra white space on the bottom of the grid, after loading new records and then scrolling back up. We only notice this on v7.5.1, not on v5.12.0. I've attached a video of the issue we are having with v7.5.1.

https://github.com/mui/mui-x/assets/6386584/039c36b2-cd3e-4c0a-bfc9-d34b24325ee1

This looks like a bug?

Current behavior

There's a lot of extra white space on the bottom of the grid, after loading new records and then scrolling back up.

Expected behavior

There shouldn't be extra white space on the bottom of the grid, after loading new records and then scrolling back up.

Context

We would like to use the infinite loading feature and have there not be extra space on the grid when scrolling back up.

Your environment

`npx @mui/envinfo`

``` System: OS: macOS 14.5 Binaries: Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm pnpm: Not Found Browsers: Chrome: 125.0.6422.61 Edge: 121.0.2277.128 Safari: 17.5 npmPackages: @emotion/react: ^11.7.1 => 11.11.4 @emotion/styled: ^11.6.0 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.19 @mui/icons-material: ^5.15.19 => 5.15.19 @mui/material: ^5.15.19 => 5.15.19 @mui/private-theming: 5.15.14 @mui/styled-engine: 5.15.14 @mui/system: 5.15.15 @mui/types: 7.2.14 @mui/utils: 5.15.14 @mui/x-data-grid: ^7.5.1 => 7.5.1 @mui/x-data-grid-pro: ^7.5.1 => 7.5.1 @mui/x-date-pickers: ^7.5.1 => 7.5.1 @mui/x-license: ^7.2.1 => 7.2.1 @types/react: ^17.0.1 => 17.0.80 react: ^17.0.1 => 17.0.2 react-dom: ^17.0.1 => 17.0.2 typescript: ^4.8.4 => 4.9.5 ```

Search keywords: extra space infinte loading Order ID: 90881

[michelengelen]

Hey @swensel

To help us diagnose the issue efficiently, could you provide a stripped-down reproduction test case using the latest version? A live example would be fantastic! ✨

For your convenience, our documentation offers templates and guides on creating targeted examples: Support - Bug reproduction

Just a friendly reminder: clean, functional code with minimal dependencies is most helpful. Complex code can make it tougher to pinpoint the exact issue. Sometimes, simply going through the process of creating a minimal reproduction can even clarify the problem itself!

Thanks for your understanding! 🙇🏼

[github-actions[bot]]

The issue has been inactive for 7 days and has been automatically closed.

[swensel]

Hi @michelengelen , here is a github repo that reproduces this issue: https://github.com/swensel/MUI-bug-demo-13441 Demo on Stackblitz: https://stackblitz.com/edit/react-gothse?file=Demo.tsx

In the end, it was not related to infinite loading. It was related to a custom row height:

slotProps={{
  row: {
    rowHeight: 40,
  },
}}

Here's a video demonstrating the issue when row height is present:

https://github.com/user-attachments/assets/199338e0-a912-4eb4-8df4-0fd303e117fe

Also, here's a video when row height is not present (no issue in this case):

https://github.com/user-attachments/assets/9a46d19b-613c-4479-8352-7256cafacb02

[michelengelen]

Thanks for the reproduction demo @swensel ... @romgrk could you have a look please? Thanks!

[cherniavskii]

Hi @swensel I just realized you're passing the rowHeight prop to the row slot. You should use the rowHeight prop instead because the row slot is only one of the places that use this information. Here is a working demo: https://stackblitz.com/edit/react-gothse-mu4dc9?file=Demo.tsx

[github-actions[bot]]

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@swensel: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.