Reordering horizontal lists does not work if draggable is rendered outside of viewport (ignoreContainerClipping broken?)

[tjramage]

Bug or feature request?

Bug

Expected behavior

In horizontal lists, all draggables should reshuffle in list when reordering and moving items over other draggables (even if items are rendered outside of the viewport and you must first scroll to get to the item).

Actual behavior

When reordering draggables in a horizontal list, if the draggable is initially rendered outside of the viewport (i.e. you have to scroll to get to it), then the other draggable items do not reshuffle in order to allow replacement into the list.

Steps to reproduce

1. Create a horizontal list with the latest v4.0.0
2. Ensure there are enough draggables so that the list extends beyond the right-hand side of the viewport and there is a large horizontal scroll distance
3. Scroll all the way to the right of the page
4. Try to reorder a draggable

Browser version

Latest version of Chrome (macOS High Sierra)

Demo

See GIF below. Initial drag works when moving items that are rendered within the viewport. Watch how items do not reorder when I scroll to the right:

[tjramage]

@alexreardon — any thoughts on this one? Do you need an example with source code?

[alexreardon]

Yes, a webpack bin would be ideal. Here is the boilerplate: https://www.webpackbin.com/bins/-Kr9aE9jnUeWlphY8wsw

[crapthings]

i have same issue, it seems the parent container's width is your current viewport width.

[crapthings]

[crapthings]

after i change parent container's width > decks width it works.

.board
  display inline-flex
  flex 1
  background-color aliceblue
  background-color red
  width 50000px

@tjramage

so should we write style by manually? or it should come with the auto scroll feature?

[alexreardon]

It should work out of the box, or we should at least provide direction. How browsers handle horizontal overflow is different to how they handle vertical. This is worth investigating to either add a fix or a disclaimer

[sherbakovdev]

Hello, have the same issue with vertical list.

[alexreardon]

TODO: add a disclaimer to docs

[alexreardon]

I added good first issue with the task being to update the docs 😊

[aningbo]

Was this issue ever fixed? I'm having this exact issue in v13.0.0