react-beautiful-dnd
react-beautiful-dnd copied to clipboard
Scroll position is not maintained upon drag end.
Expected behavior
Scroll position of droppables (cards in a board application) should be maintained after a drag event finishes.
Actual behavior
Scroll position is only maintained for the card that was swapped to the left (for a left to right board).
Steps to reproduce
The issue is evident in the following official example: https://react-beautiful-dnd.netlify.com/?path=/story/board--scrollable-columns
- Scroll the last two cards on the right to the bottom.
- Swap the positions of the scrolled cards.
- Observe that the card swapped to the left retains its scroll position whereas the other resets to the top. Reproduced in both firefox & chrome.
This has additional implications for virtual lists. I have noticed (at least in my own usage) that when the scroll is reset to the top the corresponding list items are not rendered, leaving a blank space until the scroll position is manually adjusted.
Just encountered this as well, would love to know if there has been any investigation on this. I use another virtualized list inside each draggable column and this jump further breaks the inner virtualized list, which isn't aware of the scroll position change and as such is not rendering any items at the top of the container.
Here's a gif highlighting the problem. And again on codesandbox
I am also encountering this issue, just wondering if there has been any progress?