DragEndEvent is coming as null on onDragEnd

[yash1200]

Hey! I implemented the dnd feature on my app, the interface is like this:

The section on the left contains two elements in a column both wrapped with Droppable and the section on the right contains the grid of elements (all wrapped with Draggable)

The issue is sometimes for the last row of the grid, when I drag the element and drop it over the Droppable element, the over is returned null. The code for handleDragStart, handleDragEnd, Draggable and Droppable are below for reference.

const handleDragStart = (event) => {
  setActiveId(event.active.id);
  let index = duplicates.findIndex((i) => i.name == event.active.id);
  if (index >= 0) {
    updateSelected(index);
  }
};

// The over is null sometimes
const handleDragEnd = ({ over }) => {
  setActiveId(null);
  if (over) {
    if (over.id === "list-drop") {
      addToList();
    } else if (over.id === "image-drop") {
      updateCurrent();
    }
  }
};

const Draggable = (props) => {
  const { attributes, listeners, setNodeRef } = useDraggable({
    id: props.id,
  });

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      style={{ outline: "none" }}
    >
      {props.children}
    </div>
  );
};

const Droppable = (props) => {
  const { setNodeRef } = useDroppable({
    id: props.id,
  });

  return (
    <div ref={setNodeRef} style={props.style}>
      {props.children}
    </div>
  );
};

The code for the right section

<MaterialGrid container spacing={3}>
  {Object.assign([], duplicates).map((photo, i) => {
    return (
      <MaterialGrid item xs={grid ? 6 : 12} key={i}>
        <Draggable key={photo.name} id={photo.name}>
          <div
            id={(i + 100000).toString()}
            style={{
              cursor: "pointer",
              opacity: activeId == photo.name ? "0.5" : "1",
            }}
          >
            <RelatedDialogItem
              image={photo}
              selected={i === duplicateSelected}
            />
          </div>
        </Draggable>
      </MaterialGrid>
    );
  })}
</MaterialGrid>
<DragOverlay>
  {activeId ? (
    <div id={(0 + 100000).toString()} style={{ cursor: "pointer" }}>
      <RelatedDialogItem image={duplicates[duplicateSelected]} />
    </div>
  ) : null}
</DragOverlay>;

[Mae623]

hello, I meet across this question too. Do you find way to solve it?

[yash1200]

@Mae623 I used react-dnd and dropped this one.