Skip to content

Multiple drag an drop items get inserted in wrong order #353

@caotrem

Description

@caotrem

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

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions