clauderic / clauderic/dnd-kit

[experimental] isDropTarget is not bubbling to Droppable when it's true for Sortables above

Open
#1,812 1 comment 4 reactions 0 assignees View on GitHub
bug react triage:done
Dominant language
TypeScript
Stars
17.6k
Forks
924
Avg merge
2d 10h
Merged PRs (30d)
2

Description

Assuming the below structure:
```tsx


{list.map(item =>

)}

```
when dragging over a Sortable, its `isDropTarget` is `true` but the Droppable's `isDropTarget` is `false`.

This is a problem you can also see in the official examples over https://next.dndkit.com/react/guides/multiple-sortable-lists, especially in https://next.dndkit.com/react/guides/multiple-sortable-lists#moving-items-between-columns (where background color style is introduced)

Notice how you have to place the element between the sorting list and the droppable element for the droppable to change color, since `isDropTarget` isn't bubbled.

![Image](https://github.com/user-attachments/assets/4b356ac8-ed54-44ce-988e-be136a1250dc)

Contributor guide

Open the contributing guide

Research direction

Reproduce the nested DragDropProvider, Droppable, and Sortable structure described in the issue, starting with the multiple sortable lists example linked there. Trace how isDropTarget behaves while dragging over a Sortable and compare it with the parent Droppable; done means the Droppable also reports true and the example's background color updates without an extra element between the list and Droppable.

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
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.