-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Description
Describe the bug
Given multiple lists in a group where at least one list is empty and initially hidden (via display: hidden), dragging an item to within 5px of the owner document's top, left corner causes the item to disappear from the source list.
To Reproduce
Steps to reproduce the behavior:
- Go to the preview area in the codesandbox.
- Drag item "one" out of the first list and to within
5pxof the top, left corner of the preview area. - See item "one" disappears from its list.
- The item may be dragged back to the visible list, however dropping it in the corner causes it to disappear permanently.
Expected behavior
Item "one" does not disappear from the list when dragging to the top, left corner and the empty list is hidden.
Information
Versions - Look in your package.json for this information:
sortablejs = 1.15.6
@types/sortablejs = 1.15.8
Additional context
The real-world scenario is a UI for paginating many items. Each page is its own list within the same group. All background lists are initially hidden while the foreground list is visible. As the user drags an item to a pagination button, the corresponding list becomes visible as the new foreground list. For performance reasons, the items within background lists are not rendered until they enter the foreground. As a result, background lists appear to be empty when they're hidden.
Reproduction
codesandbox: https://codesandbox.io/p/sandbox/gracious-hodgkin-kysvzy