search

hello-pangea / dnd

💅 Beautiful and accessible drag and drop for lists with React. ⭐️ Star to support our work!
https://dnd.hellopangea.com
Other
2.44k stars 95 forks source link

Scroll position is not maintained upon drag end #453

Open dabstractor opened 1 year ago

dabstractor commented 1 year ago

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: https://github.com/atlassian/react-beautiful-dnd/issues/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.

Xhale1 commented 1 year ago

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!

danfaro commented 1 year ago

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.