Drag and drop – drop target sticks in some cases

The problem I’m seeing is that when you drop a card, in some cases, you can’t drop other cards in that same spot anymore until you shift the cards by dragging over a different item.

It’s like once the card is dropped the array doesn’t pick up the re-oder and therefore doesn’t register the drop target appropriately. It feels like a ref/rendering issue but I am having a hard time tracking down the root cause. I’ve got logs in the drag and drop function and the drag function picks up the drag but the drop function doesn’t fire at all which leads me to believe the drop target card’s ref isn’t updated? I’ll include a video and the code. This is almost straight out of the react-dnd docs

Any suggestions on how to debug this sort of thing would be helpful too! I’m happy to provide any additional information.

Here is a CodeSandbox to reproduce the issue

Here is a video demonstrating the issue

Answer

I come bearing a solution, but not necessarily an answer. =

I was able to get your demo working by making use of the collect function on your onDrop call in Card.jsx.

const [{ canDrop }, drop] = useDrop({
  accept: "card",
  collect: (monitor) => ({
    canDrop: monitor.canDrop()
  }),
  hover: handleDragHover(ref, item, onMove)
});

In fact, you don’t even need to use the canDrop variable for it to work. I have no idea why this works other than to hypothesize that calling that method is doing a state update in the redux store that makes the card droppable again… for some reason. 😐

Hopefully someone from the ReactDnD team will come along and give more context.