[data grid] `onRowsScrollEnd` triggered instantly when using a bottom pinned row

[martin-mael]

Steps to reproduce

Link to live example: (required)

Steps:

1. Create a Datagrid, with enough rows to be scrollable and pass a function to onRowsScrollEnd

Check the example : https://stackblitz.com/edit/react-kvryv4?file=Demo.tsx

Notice how the second page load is triggered instantly, and how scrolling doesn't trigger a new page load.

Current behavior

The function passed to onRowsScrollEnd is called instantly, and not when the main container of the datagrid reaches its bottom scroll area.

Same behavior using Chrome, Firefox and Safari latest.

Expected behavior

The function passed to onRowsScrollEnd should only be called when scrolling to the bottom of the grid.

Context

My code is working correctly using version 6.19.11 (latest v6 version as of date). I was migrating mui-x pro packages to v7, and my infinite scroll pagination broke. It works correctly when removing the bottom pinned row (it's used to represent totals).

Your environment

npx @mui/envinfo

``` System: OS: macOS 14.4.1 Binaries: Node: 20.3.1 - ~/.nvm/versions/node/v20.3.1/bin/node npm: 9.6.7 - ~/.nvm/versions/node/v20.3.1/bin/npm pnpm: Not Found Browsers: Chrome: 124.0.6367.118 Edge: Not Found Safari: 17.4.1 npmPackages: @emotion/react: ^11.11.4 => 11.11.4 @emotion/styled: ^11.11.5 => 11.11.5 @mui/base: 5.0.0-beta.40 @mui/core-downloads-tracker: 5.15.15 @mui/icons-material: ^5.15.15 => 5.15.15 @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 @mui/material: ^5.15.15 => 5.15.15 @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: 6.19.11 @mui/x-data-grid-pro: ^6.19.11 => 6.19.11 @mui/x-date-pickers: 6.19.9 @mui/x-date-pickers-pro: ^6.19.9 => 6.19.9 @mui/x-license-pro: ^6.10.2 => 6.10.2 @types/react: ^18.3.1 => 18.3.1 react: ^18.3.1 => 18.3.1 react-dom: ^18.3.1 => 18.3.1 typescript: ^5.4.5 => 5.4.5 ```

Search keywords: onRowsScrollEnd bottom pinned row v7 Order ID: 83724

[michelengelen]

Ok, I can confirm this is a buug on our end. One thing to note about the demo: you were incorrectly spreading the row onto the pinned row

-pinnedRows={{ bottom: [{ id: 'abc', ...rows[0] }] }}
+pinnedRows={{ bottom: [{ ...rows[0] }], id: 'abc' }}

This way the id property will get overwritten so we do not have a duplicate id in the grid.

@DanailH ... this is your expertise ... do you want to have a look into that? :P

[michelengelen]

Additional info: When applying the change mentioned above the onRowsScrollEnd handler will only get called once, not twice like before. Maybe that helps as well 🤷🏼

[martin-mael]

Oh yes you're right. I arranged the demo quickly and didn't notice the duplicated id. It's not the case in my app code though.

[martin-mael]

Hello @michelengelen, do you have any updates on this issue ?