Skip to content

[bug] Item disappears when dragging to top, left corner of document #2446

@nwhittaker

Description

@nwhittaker

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:

  1. Go to the preview area in the codesandbox.
  2. Drag item "one" out of the first list and to within 5px of the top, left corner of the preview area.
  3. See item "one" disappears from its list.
  4. 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions