clauderic / clauderic/dnd-kit

Flicker when dragging an item into a single-item list in Multiple Lists example

Open
#2,096 2 comments 0 reactions 0 assignees View on GitHub
bug helpers react
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.