[experimental] isDropTarget is not bubbling to Droppable when it's true for Sortables above
- 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.

Contributor 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