When dragging a file item over a folder (represented as a Droppable), the isDraggingOver state should update immediately to visually highlight the folder being hovered over. The dragged file should also drop into the correct folder when released.
Actual behavior
There is a noticeable delay in the isDraggingOver state updating when dragging files from top-to-bottom over folders, but not when dragging from bottom-to-top. Specifically:
I start dragging a file from a folder (e.g., cell 1) down towards another folder (e.g., cell 2).
When hovering over cell 2, the isDraggingOver state does not immediately update, only updating after nearly reaching cell 3.
This delay results in files sometimes dropping into the previous folder (cell 1) instead of the intended target (cell 2), creating unexpected behavior and incorrect file placement.
This issue affects the user experience by slowing visual feedback for the current folder being hovered over and causes logic errors in the drag-and-drop process.
Steps to reproduce
Set up a DragDropContext wrapping a list of items where each item is a Draggable.
Define folders as Droppable components nested inside Draggable items, with each folder able to accept dragged items.
Drag a file item from a folder at the top of the list (e.g., cell 1) downwards towards folders below (e.g., cell 2, then cell 3).
Observe the delay in the isDraggingOver state update as you move over each folder.
Try dragging from a folder lower in the list (e.g., cell 3) upwards to cell 2, and note that the delay issue does not occur.
Suggested solution?
Not at the moment
What version of React are you using?
18.2.0
What version of @hello-pangea/dnd are you running?
Similar to issues #821 and #804
Expected behavior
When dragging a file item over a folder (represented as a
Droppable), theisDraggingOverstate should update immediately to visually highlight the folder being hovered over. The dragged file should also drop into the correct folder when released.Actual behavior
There is a noticeable delay in the
isDraggingOverstate updating when dragging files from top-to-bottom over folders, but not when dragging from bottom-to-top. Specifically:isDraggingOverstate does not immediately update, only updating after nearly reaching cell 3.Steps to reproduce
DragDropContextwrapping a list of items where each item is a Draggable.Droppablecomponents nested insideDraggableitems, with each folder able to accept dragged items.isDraggingOverstate update as you move over each folder.Suggested solution?
Not at the moment
What version of
Reactare you using?18.2.0
What version of
@hello-pangea/dndare you running?17.0.0
What browser are you using?
Chrome
Demo