autoScroll causes continuous flickering when dragging to the right or bottom edge of a scrollable container
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
## Description
When `autoScroll` is enabled, continuously dragging an item toward the right or bottom edge of a scrollable container (keeping the pointer in the auto-scroll activation zone) causes noticeable **flickering / jitter**.
## Steps to reproduce
1. Open the official example: https://tanstack.com/table/v8/docs/framework/react/examples/column-dnd
2. Start dragging any column header
3. Move the pointer to the right (or bottom) edge of the scrollable area and hold it there to trigger continuous auto-scrolling
4. Observe the flickering during the scroll
Reproduction: https://tanstack.com/table/v8/docs/framework/react/examples/column-dnd
(Reproducible on the latest versions)
## Expected behavior
Auto-scrolling should be smooth without any visual flickering or jitter while dragging.
## Actual behavior
- Continuous flickering occurs when auto-scrolling to the right or downward
- The flickering persists as long as auto-scroll is active
- Setting `autoScroll={false}` completely eliminates the issue
## Environment
- `@dnd-kit/core`: ^6.3.1
- `@dnd-kit/sortable`: ^10.0.0
- `@dnd-kit/utilities`: ^3.2.2
- `@tanstack/react-table`: ^8.21.3
- Browser:
- OS:
## Additional context
This issue is particularly noticeable in table column reordering scenarios where the container has horizontal overflow.
Contributor guide
Research direction
Start with the official column-dnd example and reproduce the issue with autoScroll enabled while dragging to the right or bottom edge. Trace the auto-scroll behavior used by the example and compare it with autoScroll={false}; done means continuous edge scrolling is smooth without flickering or jitter.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 48/100