DragStartEvent has active.rect data null

[hexwit]

For some reason, when drag started, the active rect has no data. event.active.rect.current.initial is null.

const onDragStartHandler = (event: DragStartEvent) => {
        console.log(event.active.rect.current); <-- initial and translated properties are null. both.
}

<DndContext sensors={sensors}
                        collisionDetection={closestCenter}
                        onDragStart={onDragStartHandler}
...

Does anybody knows why? I assumed that dimension and position should be available when drag process starts. As we definitely have reference to the active node.

Thanks in advance.

[Maetes]

I would appreciate to have those values availiable too

[philipaarseth]

Any chance we could see a fix to this bug?

Did either of you find any workarounds?

[kure-]

I unfortunately haven't found any simple workaround. The rect prop has still null values in 6.0.8 version. I'm migrating from react-sortable-hoc and previously the event exposed the whole node. I can work with the rect values now in dnd-kit as I was just getting height of the sorted element anyway, but the null values are not pleasant :)

[lironbenjamin]

I am also experiencing this issue, need the ability to use the rect coordinates to determine if the draggable is above or below a droppable area.

[aboveyunhai]

if you are using next.js, it seems like this lib is not so compatible with next.js. The reference is missing somewhere. For a lot of client-side only libraries that involve reference forwarding, there is always some issues here and there, and import dynamic is never a silver bullet and generally will cause other issues and reference missing, or not abled to be passed down. It could be a bug inside the lib though.

Previously I tried to use mouse listener to capture the mouse position and do manual calculation on demand (via debounce of the entire handleDragOver for application state persistent), which causes serious performance issue and setRemoteState was called multiple times due to reference change and concurrency calls, so I don't think it's doable.

Just sharing a workaround I come out for horizontal list for onDragOver, which you can use the same idea into column via y, we can utilize the delta and activatorEvent, I can't tell how reliable this approach because there might be scrolling, etc.

      // import { getEventCoordinates } from "@dnd-kit/utilities";
      onDragOver (event: DragOverEvent) => {
       const { activatorEvent } =  event;
       const activatorCoordinates = getEventCoordinates(activatorEvent);
              // giving a example of dropping a item into a horizontal list from outside of container
              const intersectionX = (activatorCoordinates?.x || 0) + delta.x;
              const isRightOverItem =
                over && intersectionX > over.rect.left + over.rect.width / 2;
              const modifier = isRightOverItem ? 1 : 0;
              newIndex =
                overIndex >= 0 ? overIndex + modifier : overBlocks.length + 1;
  }

Because active.rect is always being null, which means closestCenter and all related functions wouldn't capture the correct result sometimes. Any thought on this issue? @clauderic

[shellyear]

Seems like this library has been abandoned

[atharvamalji]

Any chance we could see a fix to this bug?

Did either of you find any workarounds?

I've found sort of a janky workaround that works. Instead of using the onDragStart method I am using the onDragMove to get the actuatorEvent which has the target element. and use is as the reference point to traverse the dom. for instance if I have a div tag that has the setNodeRef but the listeners are on the child p tag then using the onDragMove I can get the p tag and traverse up to get the div node and the get it's offsetHeight or offsetWidth.

It might look something like this

const onDragMove = (e: DragMoveEvent) => {
    const element = e.activatorEvent.target as HTMLElement;
    console.log(element.parentElement?.parentElement?.offsetHeight);
};