react-complex-tree icon indicating copy to clipboard operation
react-complex-tree copied to clipboard

Library doesn't handle well drag'n'drop on big trees

Open selfrefactor opened this issue 1 year ago • 2 comments

Describe the bug If controlled tree has so many children, that some of the children are outside of the viewport, then the drop target is not correct. I guess this is expected limitation, but I wanted you to be aware of it.

I am not 100% sure, but I think that the same goes for uncontrolled tree as well.

To Reproduce Steps to reproduce the behavior:

Create tree with many children(lets say 50-100) that it requires scrolling to see them all. Then try to trigger drag'n'drop event that includes scrolling the list. You will notice that drop target is wrong element. It seems that logic to track the drop target get confused for some reason.

  • OS: Manjaro
  • Browser - tested on all major browsers
  • Version - "react-complex-tree": "1.1.4"

I used the library as it was the only well-supported React.js library for tree-view that supports drag'n'drop. Big thanks for that, as I really enjoyed the TS definitions and the documentation.

selfrefactor avatar Jul 08 '22 15:07 selfrefactor

Do you have an example repo where this can be reproduced? There is an example with a large (mostly flat) tree where drag-and-drop always has the correct drop location for me, even though admittably it is a bit slow. Otherwise, maybe some details could help finding the issue:

  • Is the drop target a folder or a location between items?
  • Is drag-and-drop happening with mouse or hotkeys?
  • Is the tree mostly flat or nested?
  • Are all items of equal height?

lukasbach avatar Jul 14 '22 11:07 lukasbach

I will try to create a public repo, but I don't have it right now. I will try to return back to you during the weekend.

Is the drop target a folder or a location between items?

  • if root is level 0, then this happens when dragging level 2 to level 1

Is drag-and-drop happening with mouse or hotkeys?

  • with mouse

Is the tree mostly flat or nested? only three levels of nesting

Are all items of equal height? yes, I haven't applied styling to make parents look bigger.

selfrefactor avatar Jul 14 '22 13:07 selfrefactor

I started to create the replication, but some other things came up and my focus lies elsewhere. I am closing the issue, but I will post a link if I find time to create the replication.

selfrefactor avatar Sep 12 '22 13:09 selfrefactor