search

atlassian / react-beautiful-dnd

Beautiful and accessible drag and drop for lists with React
https://react-beautiful-dnd.netlify.app
Other
33.43k stars 2.58k forks source link

Allow scroll containers to change dimensions #1309

Open Hivemind9000 opened 5 years ago

Hivemind9000 commented 5 years ago

Expected behavior

When dragging an item to the bottom of a scrollable list (where overflow-Y is set to 'auto') there should be enough space to drop the item (should be the size of the placeholder).

Actual behavior

There only seems to be a small mouse over region where the list will create enough space. If you drag the item too far below the last item in the list, the mouse over state ends and the list resizes back to its original size.

Steps to reproduce

See: https://codesandbox.io/s/8lqkjw2zz8

In the getListStyle method I have added: overflow: 'auto' If you drag an item from the RHS to the bottom of full list on the LHS you will see how small the drop target area is.

Suggested solution?

Seems like the mouse over rect is not being recalculated when the list increases height to accommodate the placeholder.

What version of React are you using?

16.8

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

11.0.2

What browser are you using?

Chrome (Windows/Latest)

alexreardon commented 5 years ago

It looks like we make an assumption about scroll containers: that their frame size (the scrollable window) does not change size during a drag. In this case the frame itself is growing.

This is a tricky one as we cannot know for sure how much growth a frame (scroll container) will absorb when an item is added to it.

alexreardon commented 5 years ago

Until we figure out an approach for this, we should call this out in the docs

Hivemind9000 commented 5 years ago

Thanks @alexreardon . It's a common use case - for example lists in Trello seem to work this way (lists grow/shrink on hover but also have a maximum height) - so it would be nice to see a solution. I tried hacking a margin into the bottom of the list and then anything under the list having a negative margin to compensate, but it's messy and can cause unwanted side effects.

I'd personally prefer the system to assume the list could grow (by the height of the placeholder) and keep the list expanded while I drag/drop, than the current behaviour. If the list couldn't grow due to max-height or some parent container limit, would having a hit box bigger than the list size be that bad? Just thinking about the "lesser of two evils"... ?