lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop

Home Page:https://rct.lukasbach.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple drag an drop items get inserted in wrong order

caotrem opened this issue · comments

Describe the bug
When selecting multiple items and dragging them to another position they sometimes get inserted in the wrong order. I don't understand under which circumstances exactly?!

To Reproduce
Create a flat tree with 5 children in the root item in an UncontrolledTreeEnvironment with a StaticTreeDataProvider.

  • Root
    • Child 1
    • Child 2
    • Child 3
    • Child 4
    • Child 5

const items = {
root: {
index: 'root',
isFolder: true,
children: ['child1', 'child2', 'child3', 'child4', 'child5'],
data: 'Root item',
},
child1: {
index: 'child1',
children: [],
data: 'Child item 1',
},
child2: {
index: 'child2',
isFolder: true,
children: [],
data: 'Child item 2',
},
child3: {
index: 'child3',
children: [],
data: 'Child item 3',
},
child4: {
index: 'child4',
isFolder: true,
children: [],
data: 'Child item 4',
},
child5: {
index: 'child5',
children: [],
data: 'Child item 5',
},
};

const dataProvider = new StaticTreeDataProvider(serverItems, (item, newName) => ({ ...item, data: newName }));

<UncontrolledTreeEnvironment
dataProvider={dataProvider}
getItemTitle={item => item.data}
viewState={{}}
canDragAndDrop={true}
canDropOnFolder={true}
canDropOnNonFolder={true}
canReorderItems={true}
defaultInteractionMode={InteractionMode.DoubleClickItemToExpand}
onSelectItems={onSelectItemsAction}
onDrop={onDrop}
>

Now multi select children 2,3,4 and move them to different positions. When f.e. dropped before Child 1 it is okay. But dropping between Child 1 and Child 5 again flips the order from 2,3,4 to 4,3,2.
In the items array in onDrop the order is always correct and thus not in synchronization with the ui state.

Expected behavior
The order of the multi selected and dragged and droped items should keep their linearIndex order when dropped. And the order of the items in onDrop should reflect the actual order the items are inserted in the tree after dropping.

Additional context

Hey, thanks for noticing, there was a bug in the drop logic. I rewrote the logic in 2.4.1, it's now a bit cleaner, hopefully I didn't miss any special cases. Let me know if it works for you.