Flicker when dragging an item into a single-item list in Multiple Lists example
- Dominant language
- TypeScript
- Stars
- 17.6k
- Forks
- 924
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 2
Description
In the React Sortable Multiple Lists Storybook example, an existing item flickers when another item is dragged into a list that currently contains only one item. This is most noticeable in Safari.
**Links**
- https://main--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/docs/react-sortable-multiple-lists--docs
- https://dndkit.com/react/guides/multiple-sortable-lists/#making-the-columns-sortable
**Steps To Reproduce**
1. Open `react-sortable-multiple-lists` in Storybook.
2. Use the example after the “Getting Started” section.
3. Make the middle column contain only `B0` by moving any extra item out of it if needed.
4. Drag `A1` from the first column into the middle column.
5. Hover/drop `A1` just below `B0`, near the second position.
Screen Recordings
https://github.com/user-attachments/assets/5f3d32f0-d591-45e2-ac2a-30aa104a335d
https://github.com/user-attachments/assets/78fc8deb-c6cd-4bc7-8d53-a206672d472c
**Actual Result**
`B0` flickers or appears to jump while `A1` is positioned near it.
**Expected Result**
`B0` should remain visually stable while `A1` is dragged into the second position.
Contributor guide
Research direction
Start by reproducing the issue in the React Sortable Multiple Lists Storybook example, especially in Safari, using the linked reproduction steps. Read the linked multiple sortable lists guide to understand the example’s intended behavior. Done means B0 stays visually stable when A1 is dragged into the second position of a single-item column.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 64/100