[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 ?

[tommy-wl]

@michelengelen are you able to provide an update, thanks

[michelengelen]

Sry... I have been on vacation. I'll add it to the board for the team to have a deeper look! Again: sry for the delay!

[tommy-wl]

Thanks for the reply @michelengelen! If you can provide an ETA, that would be great! (Premium customer)

[forwardslahsdotj]

@michelengelen Do you have any update on this or an ETA?

[forwardslahsdotj]

@michelengelen Looking for an update on this or an ETA. Premium customer - Support ID: 96081

[michelengelen]

We did not schedule this yet ... I'll ask the team if we can move it up in priority.

[forwardslahsdotj]

Thank you!

[github-actions]

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.

Note

We value your feedback @martin-mael! How was your experience with our support team?
If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!