[DataGridPro] Fix row ordering not auto-scrolling when moving beyond viewport #18557
Conversation
|
Deploy preview: https://deploy-preview-18557--material-ui-x.netlify.app/ Bundle size reportTotal Size Change: 🔺+8.75KB(+0.07%) - Total Gzip Change: 🔺+1.77KB(+0.05%) Show details for 100 more bundles (22 more not shown)@mui/x-data-grid-premium/DataGridPremium parsed: 🔺+1.47KB(+0.28%) gzip: 🔺+311B(+0.21%) |
packages/x-data-grid-pro/src/tests/rowReorder.DataGridPro.test.tsx
Outdated
Show resolved
Hide resolved
|
|
||
| if (scrollDirection === 'down') { | ||
| // Only render if the user has not reached yet the bottom of the list | ||
| const totalRowsHeight = rowsMeta.positions[rowsMeta.positions.length - 1] || 0; |
There was a problem hiding this comment.
you need to add last row height here
without it the scroll stops as soon as the last row is visible, so you end up seeing just part of it
There was a problem hiding this comment.
Thanks for pointing it out. Fixed it.
I also noticed that both the scroll areas were rendering when either of the drag operations were active. Also fixed that.
There's a weird behavior (separate from this change) I noticed too: when dragging over the scroll area and the column/row disappears, the scroll areas don't vanish as dragEnd event never fires, because the source element is now not in the DOM.
Screen.Recording.2025-06-27.at.2.52.11.PM.mov
Not sure how to fix it without messing with virtualization. Any guesses?
There was a problem hiding this comment.
and the column/row disappears
you mean you drop it outside of the browser window?
that one could be tracked with dragleave event on the grid root.
I guess dragenter and dragleave on the grid root should toggle the drag state as well.
Does row reordering has the same problem?
There was a problem hiding this comment.
React doesn't fire events on unmounted components – see https://stackblitz.com/edit/vitejs-vite-dkhtemev?file=src%2FApp.tsx
We can attach events with addEventListeners, but the event will have a different type 🤷♂️
There was a problem hiding this comment.
you mean you drop it outside of the browser window?
No, just drag it over sometime on the ScrollArea element until the item that was being dragged got unmounted and then drop it. (See video)
Does row reordering has the same problem?
Yes, the same for rows and columns
There was a problem hiding this comment.
React doesn't fire events on unmounted components – see stackblitz.com/edit/vitejs-vite-dkhtemev?file=src%2FApp.tsx We can attach events with
addEventListeners, but the event will have a different type 🤷♂️
Thank you for the super nice demo. It explains the behavior really nicely.
I'll try to switch to a manual event listener in a follow-up PR in that case.
|
Cherry-pick PRs will be created targeting branches: v7.x |
Fix #16414