search

lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
953 stars 77 forks source link

Drag & drop doesn't work properly when an item is hidden #112

Closed avanrish closed 2 years ago

avanrish commented 2 years ago

Describe the bug When you don't render an item (or hide it) included in parent's children array (e.g. "Meals" in "root"), it still is recognized during drag and drop (issue doesn't exist e.g. on click), which makes all following elements invalid. You can check the bug on codesandbox

To Reproduce Apply display: none; to the element or render null/fragment/empty element instead of it.

Expected behavior On drop the hidden/not rendered item should be completely ignored. In my sandbox example: when I drag "Fruit" and drop on "Desserts", I should get "Desserts" in console or on preview, but I get "Meals". Basically everything after "Fruit" (or "Banana" if "Fruit" is expanded), becomes an item before including hidden/not rendered items.

Desktop (please complete the following information):

Additional context In my project, I use 2 trees and they can contain any amount of items. I need to implement search functionality, but I can't use built-in due to the possible huge amount of items. Only visible items are added to the data object, but I still need to search for all items (I have API for that) and since I need drag & drop between them, I have to use 1 Controlled Environment so I thought the best idea would be to hide items that aren't in searched items' paths, but that won't work due to the issue.

lukasbach commented 2 years ago

Yes, I would say this is to be expected. react-complex-tree relies on the given data structure to render both the visuals for the tree as well as computing sizing and positioning of elements, and with the current architecture this is not easy to change. Hiding elements with display: none is a bad idea anyway since the elements will still be visible to screen readers, and one important feature of this library is accessibility which I don't want to sacrifice with a feature like this.

I would instead try to hide items by not including them in the tree in the first place: If a filter is set to hide certain items, you could change the supply logic that defines the tree structure and filter items out there, that would keep the business logic outside of the render logic and be cleaner from an architectural standpoint.

avanrish commented 2 years ago

Alright, I understand it, and thanks for the advice.