hello-pangea / dnd

Beautiful and accessible drag and drop for lists with React.

Home Page:https://dnd.hellopangea.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Scroll position is not maintained upon drag end

dabstractor opened this issue · comments

I'm carrying this issue over from the atlassian project because I'm experiencing it now and it's still an issue in the official storyboard:
atlassian/react-beautiful-dnd#1669

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://dnd.hellopangea.com/?path=/story/examples-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.

I've also found this gif someone else made highlighting the issue:
https://imgur.com/65fAa65

I'm currently using React 18.2 and DND 16.2 but this issue has been around since at least 2018.

I don't have any suggestions for fixing it yet but I'll be investigating this issue myself with the intention of eventually submitting a pull request.

I'm able to reproduce on my end. Not entirely sure what the cause is so if you've done some digging and find something, let me know :)

I'm handling other maintenance tasks for this lib right now so I likely won't be able to address this in the near future. I'd be happy to review a PR though!

I am also experiencing this issue. For me, it is a nested scroll position that's not maintained at the end of a drag and drop. Would appreciate any solutions or work arounds.