React-sortable-tree: DND auto expand issues

[DharanBro]

Is there any way to disable the auto expand while performing the DND.

When my tree is big, auto expand misleading/confusing.

[sylvaindubus]

I agree, it would be a very interesting feature to disable this auto-expand.

[lifejuggler]

Do you mean to say that when hovering over the destination node, the node should not expand at all?

[DharanBro]

@lifejuggler Yes, exactly. So that we can have the source and destination tree node open and then we can do the drag and drop. We can provide this as a property. I have already modified in my project but I haven't added as a property. May be I can provide a PR, if this could be a useful feature from library itself.

[wuweiweiwu]

@DharanBro feel free to open a PR. adding a prop that work together canDrag / canDrop would be cool.

[buzztone]

I commented previously at https://github.com/frontend-collective/react-sortable-tree/issues/141#issuecomment-380611884 on why this is a major issue for users in our application.

I'd really like to see this added to the list at #281 - it's a very significant problem for many of our users.

[grydstedt]

@buzztone how did you end up dealing with this? any temporary work around?

[tutap]

Any update or work around for this issue?

[gragland]

The best solution I could come up with is to only add children on expanded nodes. This requires having two tree data objects so you can check whether a node needs to have children added when it's expanded.

[dukoo]

Can anybody tell if this feature will be added and when? I've spent some time to workaround this but without any luck :/

[DharanBro]

The best solution I could come up with is to only add children on expanded nodes. This requires having two tree data objects so you can check whether a node needs to have children added when it's expanded.

Thinking of the same. But deep cloning the bigger tree structure doesn't make sense. Also expand on holding over a node would be more intuitive.

[dukoo]

"Also expand on holding over a node would be more intuitive." - as I took a look at code it's not designed to handle holding one element over another. It's default behaviour is to swap nodes all the time.

[aartrost]

No idea if this is still relevant but this is how I solved this issue:

render() {
    this.isDragging = false;

    return <SortableTree
            // [ your default configuration... ],
            onDragStateChanged={({isDragging, draggedNode}) => {

                this.isDragging = isDragging;

            }}
            canNodeHaveChildren={node => this.isDragging ? node.expanded : true}
        />
}

It simply only ensures that during a drag action canNodeHaveChildren only returns true when the node is already expanded.