Repository navigation
[tree view] Reordering gets stuck when the dragged item is virtualized away during autoscroll #24025
Description
Steps to reproduce
Steps:
- Open this link to live example: https://codesandbox.io/p/sandbox/cranky-gould-lwmfj9
- Start dragging one of the first items.
- Move the cursor to the bottom edge so the tree scrolls until the dragged item is out of view.
- Drop it on another item.
Current behavior
The item doesn't move. The drop indicator stays visible after the drop.
Expected behavior
The item moves to the drop position, the same as when the dragged item stays in view or disableVirtualization is set.
Context
We're migrating our custom reorderable nested list to RichTreeViewPro. Editors use it to manage the site's sitemap: about 12 top-level sections, each with up to 40 children. The custom list is virtualized and supports drag-and-drop reordering and nesting.
Moving a section often means dragging it a long way through the tree, so autoscroll kicks in. With Tree View, the drag freezes once the dragged row scrolls out of view.
For now we set disableVirtualization, which keeps reordering working but has a cost. With about 370 rows, clicking an item to open its detail view blocks the page for about 2.6 s instead of 0.9 s.
Your environment
npx @mui/envinfo
System:
OS: macOS Sequoia 15.7.2 (Apple Silicon); app runs in Docker (Ubuntu 24.04.4 LTS, Linux 6.5)
Binaries:
Node: 24.21.0
npm: 11.19.0
Browsers:
Chrome: 156.0.8078.48 (Official Build) (arm64)
npmPackages:
@mui/material: 9.3.1
@mui/system: 9.3.0
@mui/utils: 9.5.0
@mui/x-internals: 9.16.0
@mui/x-license: 9.16.0
@mui/x-tree-view: 9.16.0
@mui/x-tree-view-pro: 9.16.0
@mui/x-virtualizer: 0.7.4 (nested under @mui/x-tree-view-pro)
react: 19.3.0
react-dom: 19.3.0
typescript: 7.0.2
Search keywords: tree view, drag and drop, reordering, virtualization, dragend, autoscroll
Order ID: 121039
Activity
JCQuintas commentedon Oct 29, 2026
Thanks for the clear report, reproduced on v9.16.0.
Root cause: the reorder is committed in the
dragendhandler of the dragged item. When virtualization unmounts that row during autoscroll, the browser still firesdragendon the now-detached element, so the event never reaches the tree and the drop is never committed (the same happens if the drag is cancelled with Escape). The fix is to keep the dragged row mounted while a drag is in progress, which the virtualizer already supports for the data grid's focused cell.Until the fix ships,
disableVirtualizationis the only workaround we know of. We'll update this issue once a fix is out.github-actions commentedon Oct 30, 2026
This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.
@irynakoshynska Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.