New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Scroll position jumps after auto scrolling during drag and drop #825
Comments
Also seeing this issue, exactly as described. |
Confirming this happens with react-window, simply by having the rows draggable (no droppables, no sort manager). |
Also confirming I see this behavior with react-window. @MichaelOstrovsky or @shawnshuang - Any luck finding a workaround? |
As a temporary workaround, can you try setting the Something like: <DndContext autoScroll={{layoutShiftCompensation: false}}> |
Major thanks, @clauderic! That completely eliminated the jumping on drag-and-scroll. I was not aware this was even an option. Are all of the autoScroll customizations documented somewhere? |
@clauderic Before I forget.. another question for autoScroll options: Is there any way to completely eliminate horizontal auto-scroll? |
The |
@clauderic Thanks for taking the time to respond! Unfortunately, I'm still seeing the issue. I updated the code in my sandbox with the I'm not sure if the issue that I'm seeing has to do with the virtualization library that I'm using, @MichaelOstrovsky I see that you're also using |
I was seeing something similar on horizontal autoScroll and when I set
|
https://github.com/inokawa/virtua may help because it suports similar usecases to react-virtuoso and it works well with dnd-kit. https://inokawa.github.io/virtua/?path=/story/advanced-with-dnd-kit--default |
Is there another solution to this? I'm using https://github.com/TanStack/virtual, My hacky solution: I have resorted to patching the package, adding a new There must be a better way... |
Hi @clauderic, |
I'm also facing the same issue. setting layoutShiftCompensation to false is not helping. I am not using react-virtuoso. |
My problem is similar, when doing validations inside my "Droppable" component I used
|
In my case it works with: |
Description
I’m running into an issue where the scroll position jumps after I auto scroll while dragging and dropping an element. I’m also not sure if this issue is coming from how I’m using
dnd-kit
orreact-virtuoso
(the virtual list library that I’m using), so I’m creating GitHub issues in both repos.The issue seems to occur sporadically. It occurs only if there’s auto scrolling during drag and drop. And it occurs only if the auto scrolling is done downwards.
Do you think this issue is coming from how I’m using
dnd-kit
? If so, would you have any suggestions on how I can get rid of the scroll jump?CodeSandbox
Here is a simplified CodeSandbox that reproduces the issue. (Excuse the comments; they’re for explaining parts of
dnd-kit
to the author ofreact-virtuoso
.)Video
Below is a video that illustrates the issue. You can see that the elements are dropped in the correct order in the list, but the scroll position shifts when the element is dropped, which is disorientating.
scroll-jump-issue.mov
The text was updated successfully, but these errors were encountered: