search

KevinVandy / material-react-table

A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript
https://material-react-table.com
MIT License
1.47k stars 420 forks source link

Scroll Position Jumps when scroll stops and row gets hovered #1208

Open lainas262 opened 1 month ago

lainas262 commented 1 month ago

material-react-table version

2.13.1

react & react-dom versions

18.13.1

Describe the bug and the steps to reproduce it

We notice a change in scroll position when scrolling over the table as soon as scroll stops and hover over a row is detected. Window needs to be focused.

This seems to be more visible on chrome. Safari and firefox seem okay - there is really subtle jitter at times but nothing like chrome. On chrome you may scroll and then end up back to the starting point.

Minimal, Reproducible Example - (Optional, but Recommended)

We created a sample on codepen. We generated some random data and created a mock of our layout demonstrating how the table is nested within MUI tabs etc. https://codepen.io/RedGlove/pen/LYKWebO

Screenshots or Videos (Optional)

https://github.com/user-attachments/assets/aa1689bd-93bb-43da-beb4-6d74a2122b8d

Do you intend to try to help solve this bug with your own PR?

None

Terms

lainas262 commented 3 weeks ago

😢

KevinVandy commented 3 weeks ago

I'm not sure this is a MRT bug, but rather just how the browser behaves. How would you fix it?

lainas262 commented 3 weeks ago

I honestly have no idea where to start :/ Could you somehow guide me perhaps? It's weird that I don't observe the same behavior on other pages of our site but only the ones where we are loading the table - that's the only reason I created this issue. Is there any logic in MRT that manipulates scroll positions? Probably not, I don't see a reason why it would. Especially when it comes to containers outside the table - I assume you are manipulating scroll position for virtualization inside the table but that shouldn't affect scroll position of containers outside the table. So yeah any advice on where to start would be helpful. I agree that seems to be how the browser behaves, which is kinda odd behavior, wondering if there's any workaround.

KevinVandy commented 3 weeks ago

Virtualization overrides how the scrolling works

lainas262 commented 3 weeks ago

Interestingly if I add max height on the table container then the page scrolls smoothly:

muiTableContainerProps: { sx: { maxHeight: "300px" } }