autoScroll triggering infinite scroll

[arananegra]

Hi! A couple of users have warned about a bug that causes the page to keep stuck in an infinite scroll.

It happens when you have a list large enough to enable the scroll, then you pick and move an item to place it on top of the grid. If you drop that element without stopping the autoscrolling in the page, then the scroll won't stop unless you reload the page.

I don't know if it has to do with the configuration of the library. I've disabled the autoScroll while this gets fixed but is a nice to have feature I would feel sad to lose.

This is the sandbox: https://codesandbox.io/s/hardcore-hodgkin-78t0tu?file=/src/App.tsx

Here is a video showing what happens (you can sort the elements if you wait till the autoScroll ends):

https://user-images.githubusercontent.com/14930496/191275405-79ccfef3-579c-4371-9917-8c8e98cda3b9.mp4

Thank you for your help!

[OmarOmeiri]

Yes! I'm having the exact the same issue. After some hours of digging, I gave up and set autoScroll to false as well. But this is a huge impact on UX. I hope someone takes a look at this.

[ytamir]

This is a serious issue I am encountering as well

• Bump +

[EnzoLtzyWeb]

Hello, I got the same issue there, did you find any solution that doesn't force to set autoScroll to false ?

I used to have it working well, but it suddenly stopped working ....

Have a great day !

[arananegra]

Hi all, I think the problem is having a wrapper component SortableList (the one from line 279) and using it on line 347. Can you give it a try? At least in my code seems to be root of the problem

[EnzoLtzyWeb]

Hi, I just understood where the problem is in my code. When I'm not returning ArrayMove in my handleDragEnd function, it seems to go for infinite scrolling.

I'll try to do something to be able to return arrayMove AND to emit an event to the parent component who's handling queries I need.

If I find more about this I'll tell you ....

But I can see on your sandbox that you have returned arrayMove on the function handleDragEnd, I guess the issue isn't really around there, but it might be related ....

Anyway, have a great day !

EDIT : The problem didn't really come from returning or not arrayMove, but it was comming from a call to an apollo mutation. I guess it's a problem of re-render while scrolling. My solution is a bit dirty but I use a state in my component to watch it with an useEffect, which will call my parent mutation .... It works but I don't really like the code style on this :(

[wibed]

https://github.com/clauderic/dnd-kit/pull/140

with these changes, infinite scrolling has been fixed for me

[arananegra]

I've tried to bump all the dnd-kit dependencies and the issue is still reproducible in the codesandbox

[anfinil]

The same issue. It is unable to clearAutoScrollInterval in https://github.com/clauderic/dnd-kit/blob/master/packages/core/src/hooks/utilities/useAutoScroller.ts. More over, you can run multiple parallel autoscrolls with different directions.

[veecam]

Make sure that your DndContext or it's parent component is defined outside a component. Otherwise DndContext will be unmount and mount again, the intervalRef in useInterval will be reset, and the AutoScroll won't stop.

Don't do this:

const SomeComponent = () => {
  const Container = () => <DndContext />;
  return <Container />;
}

Change to:

const Container = () => <DndContext />;
const SomeComponent = () => <Container />;

[anfinil]

Make sure that your DndContext or it's parent component is defined outside a component. Otherwise DndContext will be unmount and mount again, the intervalRef in useInterval will be reset, and the AutoScroll won't stop.

Don't do this:

const SomeComponent = () => {
  const Container = () => <DndContext />;
  return <Container />;
}

Change to:

const Container = () => <DndContext />;
const SomeComponent = () => <Container />;

Thanks, it works.

[zaidoooo]

any solution to this? facing similar issue like the OP sandbox

[wangqiaoling01]

any solution to this? facing similar issue like the OP sandbox. Help~~

[veecam]

any solution to this? facing similar issue like the OP sandbox. Help~~

https://codesandbox.io/s/magical-rgb-2srcfs?file=/src/App.tsx

Do not let the DndContext been remounted.

[veecam]

any solution to this? facing similar issue like the OP sandbox. Help~~

他那个演示代码里， DndContext写在SortableList这个组件内部， SortableList组件写在App内部， 导致每次setImages的时候，SortableList会被卸载、加载，DndContext也跟着一起被卸载、加载了。

要么把SortableList组件useMemo一下， 要么把组件定义在App组件外部，要么在App里直接用DndContext，总之<<<不要让DndContext被重载>>>。

这问题几乎都是该原因导致的。

[wangqiaoling01]

any solution to this? facing similar issue like the OP sandbox. Help~~

他那个演示代码里， DndContext写在SortableList这个组件内部， SortableList组件写在App内部， 导致每次setImages的时候，SortableList会被卸载、加载，DndContext也跟着一起被卸载、加载了。

要么把SortableList组件useMemo一下， 要么把组件定义在App组件外部，要么在App里直接用DndContext，总之<<<不要让DndContext被重载>>>。

这问题几乎都是该原因导致的。

好使！！

[arananegra]

I'll close this as it is already solved (https://github.com/clauderic/dnd-kit/issues/891#issuecomment-1521176036 or https://github.com/clauderic/dnd-kit/issues/891#issuecomment-1344435200)