Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[DataGrid] Fix scrollbar position not being updated after scrollToIndexes #14888

Merged
merged 14 commits into from
Oct 10, 2024

Conversation

arminmeh
Copy link
Contributor

@arminmeh arminmeh commented Oct 9, 2024

Reverts #14877, because of a regression

Fixes #14830

Instead of changing the event listeners, new approach is to directly update scroll positions of the scrollbars together with the position of the scroller via refs

@arminmeh arminmeh added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! labels Oct 9, 2024
@arminmeh arminmeh requested a review from cherniavskii October 9, 2024 07:21
@mui-bot
Copy link

mui-bot commented Oct 9, 2024

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

Generated by 🚫 dangerJS against 4724c6f

@arminmeh arminmeh force-pushed the horizontal-scrollbar-position branch from cae7431 to 005e2cf Compare October 9, 2024 10:43
@JCQuintas
Copy link
Member

Not sure you fixed it already, but wrapping the events in act seem to work on my side, I had encountered something similar here 🙃

    const virtualScroller = container.querySelector('.MuiDataGrid-virtualScroller')!;

    await act(async () => {
      // arbitrary number to make sure that the bottom of the grid window is reached.
      virtualScroller.scrollTop = 12345;
      virtualScroller.dispatchEvent(new Event('scroll'));
    });

    await waitFor(() => {
      expect(handleRowsScrollEnd.callCount).to.equal(1);
    });
    await act(async () => {
      setProps({
        rows: baseRows.concat(
          { id: 6, brand: 'Gucci' },
          { id: 7, brand: "Levi's" },
          { id: 8, brand: 'Ray-Ban' },
        ),
      });
      // Trigger a scroll again to notify the grid that we're not in the bottom area anymore
      virtualScroller.dispatchEvent(new Event('scroll'));
    });

    expect(handleRowsScrollEnd.callCount).to.equal(1);

    await act(async () => {
      virtualScroller.scrollTop = 12345;
      virtualScroller.dispatchEvent(new Event('scroll'));
    });

    await waitFor(() => {
      expect(handleRowsScrollEnd.callCount).to.equal(2);
    });

Comment on lines +75 to +82
/**
* The React ref of the grid's vertical virtual scrollbar container element.
*/
virtualScrollbarVerticalRef: React.RefObject<HTMLDivElement>;
/**
* The React ref of the grid's horizontal virtual scrollbar container element.
*/
virtualScrollbarHorizontalRef: React.RefObject<HTMLDivElement>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do these need to be public? I'd rather avoid exposing stuff until it needs to be exposed, once it's public it can't be refactored/removed.

Copy link
Contributor

@romgrk romgrk Oct 9, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also wanted to refactor the names to remove the "virtual" prefix from everywhere (but I couldn't because it would be a breaking change), it would make for more readable names and shorter lines. It could be interesting to name those just scrollbarXxxxRef.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

They're defined in the GridCorePrivateApi interface, so not public 👍🏻

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The only public thing around this are few classes
https://mui.com/x/api/data-grid/data-grid/#data-grid-classes-MuiDataGrid-virtualScroller

we can make the change in v8 if you want to have a cleanup

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

by the way, merging this to fix the regression for the release
renames can be handled separately

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Horizontal scrollbar position is not updated after scrollToIndexes
5 participants