React-beautiful-dnd: Vertical lists wrong droppable position on scrolling horizontally

[shalkam]

Bug or feature request?

Bug

Expected behaviour

Draggable item to be dropped in the correct vertical droppable list

Actual behaviour

it falls into another droppable list far to the left after scrolling to the right

Steps to reproduce

Just add many vertical droppable lists and drag and drop after scrolling horizontally

Browser version

Chromium
Version 61.0.3163.79 (Official Build) Built on Ubuntu , running on Ubuntu 16.04 (64-bit)

Demo

Webpackbin demo:
https://www.webpackbin.com/bins/-KvQsjkg5qUa5We4ydGB

image:

[alexreardon]

This is currently an unsupported scenario: a list with a scroll bar (a scroll container) within another element that has a scroll bar (a scroll container). We may look at supporting nested scroll containers in the future - but currently a Droppable can only have one scroll container. You application should work if you remove the overflow (scrollbar) on the internal lists.

Cheers!

[alexreardon]

I think it could be worth adding support for two levels of scroll containers at some point

[jasperfurniss]

@shalkam @alexreardon @jaredcrowe

I've been playing around with the original webpack and was unable to get it working, even after removing the overflow (scrollbar) on the internal lists, as you suggested Alex.

Any luck getting a working example with this webpackbin (https://www.webpackbin.com/bins/-KvQsjkg5qUa5We4ydGB)? Can't seem to get it working at all.

Consistently getting "Uncaught TypeError: Cannot convert undefined or null to object".

Does the reorder function on line 12 need to be tweaked a little?

Thanks any help and support. Really enjoying using the library.

Jasper