When changing DragOverlay width or height, dnd keeps it on a wrong place using handle

[bohumilmilacek]

---

name: Bug Report
about: DragOverlay unexpected behaviour when size changed.
labels: bug

Description

When width or height is edited in DragOverlay(Example 1 below). The overlay is kept far away from the dnd handle. So when I try to modify the overlay position, it keeps the overlay collision box on the original box(Example 2). Does anybody know how to fix this?

Example 1

<DragOverlay
   modifiers={[restrictToFirstScrollableAncestor]}
   style={{
      width: 126,
      height: 126,
   }}
>
</DragOverlay>

Screen.Recording.2025-01-12.at.9.45.35.mov

Example 2

<DragOverlay
   modifiers={[restrictToFirstScrollableAncestor, cursorOffsetModifier]}
   style={{
      width: 126,
      height: 126,
   }}
>
</DragOverlay>

const cursorOffsetModifier: Modifier = ({ transform, activeNodeRect, overlayNodeRect }) => {
   if (!activeNodeRect || !overlayNodeRect) return transform;
   return {
      ...transform,
      x: transform.x + activeNodeRect.width - overlayNodeRect.width,
      y: transform.y, // Keep Y unchanged
   };
};

Screen.Recording.2025-01-12.at.9.46.12.mov

Expected Behavior

I expect the DragOverlay to be on the handle, even when I change the size.

Actual Behavior

The overlay is on the previous position like if the size of the DragOverlay wasn't changed.

Environment

MacOS Seqouia 15
Chrome 131
React 19
Typescript 5

[oolongstack]

I felt like it at first https://docs.dndkit.com/api-documentation/draggable/drag-overlay#portals, but it seems not.

[bohumilmilacek]

I felt like it at first https://docs.dndkit.com/api-documentation/draggable/drag-overlay#portals, but it seems not.

I tried the portal, but it did not help me. Should that solve the problem?