[DataGrid] onRowsScrollEnd triggered when applying filters

[sorinpav]

Steps to reproduce

Link to live example: https://stackblitz.com/edit/react-bpfeec?file=Demo.js

Steps:

1. Filter by Name (or any other for that matter)
2. Notice the console - "onRowsScrollEnd triggered", coming from onRowsScrollEnd prop passed to component.

Current behavior

The onRowsScrollEnd event gets triggered when using row filters.

Expected behavior

The onRowsScrollEnd should not be triggered by that.

Context

We have an "X results displayed" string above the dataGrid, that says how many results are displayed, and when filtering, that number increases as it's getting the second batch of results, making it inaccurate (we don't use pagination).

Your environment

System: OS: Windows 10 10.0.19045 Binaries: Node: 20.9.0 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 10.1.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.19041.1266.0), Chromium (120.0.2210.61) npmPackages: @emotion/react: ^11.11.1 => 11.11.1 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-beta.22 @mui/core-downloads-tracker: 5.14.16 @mui/icons-material: ^5.14.16 => 5.14.16 @mui/lab: ^5.0.0-alpha.151 => 5.0.0-alpha.151 @mui/material: ^5.14.16 => 5.14.16 @mui/private-theming: 5.14.16 @mui/styled-engine: 5.14.16 @mui/system: 5.14.16 @mui/types: 7.2.8 @mui/utils: 5.14.16 @mui/x-data-grid: ^6.14.0 => 6.18.1 @mui/x-data-grid-premium: ^6.16.1 => 6.18.1 @mui/x-data-grid-pro: 6.18.1 @mui/x-date-pickers: ^5.0.15 => 5.0.20 @mui/x-license-pro: 6.10.2 @mui/x-tree-view: 6.0.0-alpha.1 @types/react: 17.0.3 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 typescript: ^5.2.2 => 5.2.2

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: onRowsScrollEnd
Order ID: 77486

[michelengelen]

Hey @sorinpav I am not able to open your live example. It is stuck at connecting to dev server.\ Could you check if there is something wrong with it and get back to us? Without the example we will not be able to help you with this. Thanks! 🙇🏼

[sorinpav]

@michelengelen I will have a look, thanks for letting me know. I'll edit the link in a few minutes.

[sorinpav]

@michelengelen I edited the link in the main description. This should now work, hopefully. I'll add it here for visibility as well. https://stackblitz.com/edit/react-bpfeec?file=Demo.js
Thanks for the help!

[michelengelen]

OK, thanks for fixing that example.
The behavior of the event is as intended.
What exactly are you trying to accomplish with this? Maybe I can help to find another way of doing this.

From your description it seems when filtering and the results return a small enough amount of rows the onRowsScrollEnd gets triggered and you fetch new data from your backend, is that about right?

[sorinpav]

@michelengelen yes, exactly, and we would wish to be able to fetch results from the server only when intentionally scrolling down, not when filtering.

[sorinpav]

Currently, we added a workaround with a useEffect that listens to the statechange event, and gets the number of visible rows by using gridExpandedRowCountSelector, a code shim looks something like this:

  import {gridExpandedRowCountSelector} from "@mui/x-data-grid-premium";

  const [visibleRows, setVisibleRows] = useState();

  useEffect(() => {
    apiRef?.current?.subscribeEvent?.("stateChange", () => {
      const count = gridExpandedRowCountSelector(apiRef.current.state);
      setVisibleRows(count);
    });
  }, [apiRef, apiRef?.current?.subscribeEvent, apiResults]);

and then using visibleRows to update X in the "X results displayed" string above the dataGrid, but we see this as a workaround since the results fetching from the server still happens, but at least we have that number reflecting how many rows are actually seen on screen.

On the performance side of things, it's extra requests to the server that the user hasn't asked for, so that is why we would prefer the event to not trigger, because we haven't solved that with our workaround.

Posting the code here to help others who may encounter the same issue, and don't mind the extra requests.

@michelengelen if you have any better ideas please shout up! Thanks for the help!

[sorinpav]

The behavior of the event is as intended.

Also, I understand that the event triggers when it thinks it's reached the end of the list of rows, but I don't think it's correct for that to happen when the user is just filtering results, as of course you're going to reach the end of the list if you're looking for one particular result only.

[DanailH]

I think this relates to this PR #8672. The goal of the PR is to rework the way that the onRowsScrollEnd behaves.
The main problem with the name of the callback is that it implies that it will only be called if the user scrolls which is not the case - it's called whenever the "scroll" reaches the bottom which in the case of having fewer rows than the viewport can take will result in the callback being called.
Hope that this explains the issue.

I'll close this in favor of #4371 as it is essentially a duplicate.