Can't scroll tree while dragging

[metapone]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Have a list with enough content to overflow its container, or window.

What is expected?

While dragging, mousewheel could be used to scroll down to currently not visible component.

What is actually happening?

Mousewheel is lock, can't scroll. If user drags the item to the top/bottom of its container, the tree is scrolled but the drag operation is aborted after a few seconds (cursor turned to 'not-allowed' icon). Programmatically scroll the tree has the same result.

Environment	Info
antd	4.15.2
React	17.0.2
System	Windows 10
Browser	Chrome 91

[0407chan]

have the same problem.
any updates?

[metapone]

@0407chan If you want to at least be able to scroll, you can do it like I did. I ended up using 2 hidden divs set on top and bottom of the list with onDragOver event handler to manually scroll the list. You will have to handle special cases like users dropping item outside of the list, or dragging sometimes triggers hover event on list items randomly, but at least the list is scrollable.

[0407chan]

@metapone thanks for share.
I'll try that.

[0407chan]

@metapone Have question for you.
how did you move scroll on Virtual List?
I added 2 hidden div width onDragOver but can't move scrollbar in virtual list.
how to handle it?

[metapone]

@0407chan use a ref or a DOM query to get the virtual list, then use scrollBy. I set y-coord to +-50 but you can adjust it to however you want. Remember to debounce it because onDragOver got fired hundreds of times per second and you don't want the list to be scrolled that fast.

[callmecly]

const onDragOver = (info) => {
    if (info.event.target) {
        scrollTo(info.event.target);
    }
};

const scrollTo = useCallback(
    throttle((target) => {
        const { bottom: currentBottom, top: currentTop } = target.getBoundingClientRect();
        const { bottom: boxBottom, top: boxTop } = document
            .getElementsByClassName('ant-tree-list-holder')[0]
            .getBoundingClientRect();

        if (currentTop > boxBottom - 48) {
            document.getElementsByClassName('ant-tree-list-holder')[0].scrollTop =
                document.getElementsByClassName('ant-tree-list-holder')[0].scrollTop + 32;
        }

        if (boxTop + 48 > currentBottom) {
            document.getElementsByClassName('ant-tree-list-holder')[0].scrollTop =
                document.getElementsByClassName('ant-tree-list-holder')[0].scrollTop - 32;
        }
    }, 100),
    [treeRef]
);

Here's my implementation for reference!

[canberkakartuna]

Same problem, any updates?

[Wxh16144]

Same problem, any updates? :(