React-beautiful-dnd: Cannot drop draggable after scroll

[wadjoh]

Bug or feature request?

Bug

Expected behavior

Should be able to drag a draggable, horizontally scroll the droppable container, and drop the draggable.

Actual behavior

Can not be dropped between draggables that were scrolled into view from off the screen. (See GIF below in Demo section)

Steps to reproduce

Get a board with columns aligned horizontally
Get enough columns to overflow the container
Pick up draggable and move it to side of container so it scrolls
The other draggables will move aside for the one you are dragging, but the ones that were just scrolled onto the screen will not respond.
If you drop it over one of the draggables that was just scrolled into view, it will be dropped in the original position it was picked up from.

Browser version

Chrome Version 64.0.3282.167 (Official Build) (64-bit)
MacOS

Demo

I repurposed a Sandbox to give a rough idea of what I am seeing: https://codesandbox.io/s/pmz6p027zj
The lists should be overflowing their container. If not, then make the preview window thinner so they do.

The project I'm working on is here: https://github.com/hooskers/trellis
The component that contains the Board that holds the List columns is here: https://github.com/hooskers/trellis/blob/master/src/js/components/Board/Board.jsx
The component for the List is here https://github.com/hooskers/trellis/blob/master/src/js/components/List/List.jsx

Can be tested/inspected here https://hooskers.github.io/trellis/#/board/board1 (Click the + button in the to right to add a column to the board)
And here is a gif of what I am seeing:

[alexreardon]

Thanks for reaching out @hooskers. Super helpful to have an example to play with. Your issue is caused by this:

overflow-y: auto;

on your lists. Currently we only support a Droppable that is itself a scroll container OR is within a single scroll container. Your example has two levels of scroll container (the list itself and a parent). We are hoping to support nested scroll containers in the future #131.

For now you can get around the issue by either removing the wrapping scroll container or during off scrolling on your lists.

[wadjoh]

Thanks @alexreardon! Your comment pointed me in the right direction to getting the problem solved. (I also should've have read the docs more closely). I've got scrolling the board and scrolling the card list working perfectly on my project site, now! 👍

This is an impressive library. Love the amount of thought put into the interactions.

[humphreybc]

@hooskers What was your solution in the end? We have the same problem. I don't see overflow-y: auto anywhere in your code sandbox example.

[alexreardon]

@humphreybc their lists are scrollable and their lists side inside a container that is scrollable. This is not supported atm - although we hope to support it #131

[wadjoh]

@humphreybc Sorry I was at a wedding this weekend.
My lists had a scrollable container inside of them for the cards. I changed it so I had to scroll the whole page rather than within the lists. On top of that, I couldn't figure out how to get scrolling to work correctly when the Droppables themselves were scroll containers so I had to wrap it in a container with overflow: auto.
You can inspect the styles and elements at:
https://hooskers.github.io/trellis/#/board/board1 (Click the + button in the top right to add a list to the board)

[alvaro-berruga-entytle]

@alexreardon About this issue, I have something similar and not sure if I should open a new ticket or not.

In my case, the gif displays all the webpage. There are no more either Draggables or Droppables.

If I take one Draggable and then I try to put it between two that are hidden by the scroll and are not being displayed, then there will not be animation during the action. Is this part of #131 ? If I try to drop it there, destination property will be null.

Thanks for your help

[nicubarbaros]

I have opened an issue as well #385 , my case involves dynamically loaded droppables on drag/scroll

[myleftshoe]

Thanks for the overflow:auto tip! Had DragDropContext element nested in a div, it was as simple as adding style={{overflow:auto}} to the div.

[bhao-speedline]

@alvaro-berruga-entytle Hey man, have you figured out the issue? I'm having the same issue and have been trying to fix it for a whole day. Thanks.

[cezaryB]

@alexreardon

Hi!

I just wanted to ask if you are still working on support for Droppable nested inside another Droppable?

[sohansarma]

@humphreybc Sorry I was at a wedding this weekend.
My lists had a scrollable container inside of them for the cards. I changed it so I had to scroll the whole page rather than within the lists. On top of that, I couldn't figure out how to get scrolling to work correctly when the Droppables themselves were scroll containers so I had to wrap it in a container with overflow: auto.
You can inspect the styles and elements at:
https://hooskers.github.io/trellis/#/board/board1 (Click the + button in the top right to add a list to the board)

Based on @hooskers board.
steps to the issue :
Add cards and sections that exceeds the viewport. Now I want to keep the page fixed( Not scrollable) but I shall be able to drag the cards with scrolling inside the section vertically but then I want to scroll the cards to another section outside the viewport. Any help with the issue ?

[ariel-frischer]

Thanks for the overflow:auto tip! Had DragDropContext element nested in a div, it was as simple as adding style={{overflow:auto}} to the div.

Unfortunately this did not seem to work for me, I'm using material UI with a Drawer component which holds a SwipeableView component, that holds a droppable list of draggable cards. I've been using portal implementation as well which helps with dragging offset but adding overflow: "auto !important" to any parent div, children, component, or the portal does not seem to helping scroll my draggables. If anyone has some not too hacky workarounds that would be appreciated, otherwise we might just have to use another drag and drop library unfortunately.

[almostgone47]

For anyone working with Material UI and having the same troubles, this fixed the problem for me.

[eazylaykzy]

For anyone working with Material UI and having the same troubles, this fixed the problem for me.

Hello @almostgone47 please, I'm not sure what you did that fixed the error for you, can you please be specific on what you did, the image is not revealing anything for m to follow.

[eazylaykzy]

For anyone equally working with Material UI (especially drawer and appBar components) and having the same troubles, this fixed the problem for me.

My <Drawer/> has classes={{paper: classes.drawerPaper}}, I added a custom CSS property to the drawerPaper class: overflowY: 'unset'

This is because overflowY is set to auto on the drawerPaper class.

[almostgone47]

@eazylaykzy Sorry I didn't make it more obvious. I removed overflow: auto from .EnhancedTable-tableWrapper-40, which is an outer div that my dnd headers are in.