useSortable's transform property returns null when reaching a certain point

[christiangrothaus]

I am attempting to create a horizontal sortable list but the transform property returns null when the draggable item reaches a certain point.

• The key for the list of items is a unique ID that is persistent
• The ID passed in useSortable is that same unique ID
• Transform is returned as null at the same x coordinate for all items
• The x coordinate where the items reset increases at a diminishing rate when adding more items
• Once the list is long enough to go past the point where null is returned, null will still be returned but moving the cursor further causes the item to be picked back up
• Changing the collision algorithm changes the distance at which transform returns as null

[christiangrothaus]

After more investigation I noticed that the container is being added to the list of collisions. This is when using the provided collision strategies.

[DubstepKnight]

I am experiencing a very similar issue, @christiangrothaus have you found a solution or a workaround?

[christiangrothaus]

I am experiencing a very similar issue, @christiangrothaus have you found a solution or a workaround?

I ended up creating a custom collision detection wrapper function. I wanted to use the closestCenter algorithm, so I extracted the droppabledRects property from the arguments, deleted the container from the map, and passed everything back to the provided algorithm.

const collisionAlgorithm: CollisionDetection = (args) => {
  const {
    active,
    collisionRect,
    droppableContainers,
    droppableRects,
    pointerCoordinates
  } = args;

  droppableRects.delete('container-id');

  return closestCenter({
    active,
    collisionRect,
    droppableContainers,
    droppableRects,
    pointerCoordinates
  });
};

[sno6]

I ran into a similar issue which was being caused by SortableContext.