Scroll Position Jumps when scroll stops and row gets hovered
lainas262 opened this issue · 5 comments
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)
2024-08-02_13-23-05.mp4
Do you intend to try to help solve this bug with your own PR?
None
Terms
- I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
😢
I'm not sure this is a MRT bug, but rather just how the browser behaves. How would you fix it?
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.
Virtualization overrides how the scrolling works
Interestingly if I add max height on the table container then the page scrolls smoothly:
muiTableContainerProps: { sx: { maxHeight: "300px" } }