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 scroll jump with dynamic row height #16763

Merged

Conversation

cherniavskii
Copy link
Member

Fixes #14726

@cherniavskii cherniavskii added bug 🐛 Something doesn't work component: data grid This is the name of the generic UI component, not the React module! plan: Pro Impact at least one Pro user regression A bug, but worse feature: Row height Related to the data grid Row height features needs cherry-pick The PR should be cherry-picked to master after merge v7.x labels Feb 28, 2025
@mui-bot
Copy link

mui-bot commented Feb 28, 2025

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

Generated by 🚫 dangerJS against 935e56f

@cherniavskii cherniavskii marked this pull request as ready for review February 28, 2025 13:37
@cherniavskii cherniavskii requested a review from a team February 28, 2025 13:37
@arminmeh
Copy link
Contributor

arminmeh commented Feb 28, 2025

I still see a small movement when you stop scrolling and then hover over another row

Watch row 5

Screen.Recording.2025-02-28.at.15.14.01.mov

@cherniavskii
Copy link
Member Author

cherniavskii commented Feb 28, 2025

@arminmeh Seems like an unrelated issue – I can reproduce it without dynamic row height:

Screen.Recording.2025-02-28.at.17.25.02.mov

(rows 17-20 move a bit).

@arminmeh
Copy link
Contributor

arminmeh commented Mar 3, 2025

@arminmeh Seems like an unrelated issue – I can reproduce it without dynamic row height:

Found the reason
https://github.com/mui/mui-x/blob/v8.0.0-alpha.13/packages/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx#L350

After the scrolling and the timeout, render context changes (adds buffer) and the rows are re-rendered
I will investigate this separately, it should not block this PR

});

await page.mouse.wheel(0, 150);
await page.waitForTimeout(500);
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we use waitForSelector here?

In the description of waitForTimeout it says

Note that page.waitForTimeout() should only be used for debugging. Tests using the timer in production are going to be flaky. Use signals such as network events, selectors becoming visible and others instead.

Copy link
Member Author

Choose a reason for hiding this comment

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

Without a timeout, the assertion will happen before the potential scroll jump, and the test will pass without the fix applied.
I can't see waitForSelector as a replacement here, but I'm open for suggestions.

Copy link
Contributor

Choose a reason for hiding this comment

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

I didn't test it out, but what I had in mind is to wait for the last row to become attached or first row detached because of the virtualization and assert then
could that work?

Copy link
Member Author

Choose a reason for hiding this comment

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

the last row to become attached or first row detached

Both happen before the scroll jump, so the test will pass without the fix applied.

Perhaps it's possible to make an assertion that will wait for the first row to appear again after scroll with a timeout, and throw if it does appear. But it's not that different from the current solution.
WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

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

yes, that would also just spend time waiting for nothing to happen 🙂
in that case, I am fine leave it as is for now

@cherniavskii cherniavskii merged commit c74f3cb into mui:master Mar 3, 2025
18 checks passed
@cherniavskii cherniavskii deleted the dynamic-row-height-scroll-jump branch March 3, 2025 15:33
Copy link

github-actions bot commented Mar 3, 2025

Cherry-pick PRs will be created targeting branches: v7.x

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! feature: Row height Related to the data grid Row height features needs cherry-pick The PR should be cherry-picked to master after merge plan: Pro Impact at least one Pro user regression A bug, but worse v7.x
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[data grid] Row auto height scroll glitch
3 participants