react-beautiful-dnd doesn’t work properly with react-virtualized Table component

Question

Expected behaviour

Row should get dragged to its destination index when dragged from top to bottom and vice versa with DnD animation.

Actual behaviour

Row doesn’t get DnD when dragged from bottom to top index. Top to bottom drag works but the item is added after the last page index and not to the destination index. DnD animation seems not to be working as well.

Steps to reproduce

You can refer this sandbox to replicate the issue.

Case 1: Top to bottom drag

1. Try to drag and the row from top to bottom index
2. you will see the row gets dragged to last index of the page not the destination index

Case 2. Bottom to Top drag

1. Try to drag and the row from bottom to top index
2. you will observe the rows doesn’t get dragged and onDragEnd is not called.

The same code works with react-virtualized's List component but not the Table component.

What version of React are you using?

16.13.0

What version of react-beautiful-dnd are you running?

13.0.0

What version of react-virtualized are you running?

9.22.3

What browser are you using?

Chrome

Demo

I have created this sandbox to replicate the issue. You can run this to check the issue.

https://codesandbox.io/s/vertical-list-forked-3lp71?file=/index.js

Can anyone take a look at the sandbox and help me out? Let me know if you need another info!

---

Edit

So today, I debug this more and made some progress. Looks like the issue was with rowRenderer implementation. There was an extra wrapper div on top of defaultRowRenderer's dom. I was able to solve the issue partially. Here is the new sandbox link with the updated code.

Now, there's one issue left is scroll doesn't work while dragging the row. Any pointers how can I fix this?

Answer 1

Finally, solved the issue (not sure if this is the right way). The solution was to pass ref as react virtualized scrolling wrapper div instead of react-virtualized main wrapper div.

I had updated the above sandbox with the fix.

Before

ref={(ref) => {
                      
     if (ref) {
        // eslint-disable-next-line react/no-find-dom-node
        const whatHasMyLifeComeTo = ReactDOM.findDOMNode(ref);
        if (whatHasMyLifeComeTo instanceof HTMLElement) {
            provided.innerRef(whatHasMyLifeComeTo);
         }
      }
}}

After (fix)

ref={(ref) => {
       if (ref) {
        const whatHasMyLifeComeTo = document.getElementsByClassName(
          "ReactVirtualized__Grid ReactVirtualized__Table__Grid"
        )[0];
        if (whatHasMyLifeComeTo instanceof HTMLElement) {
          provided.innerRef(whatHasMyLifeComeTo);
        }
      }
}}