Trouble with nested droppables

[ssalka]

• Using "@dnd-kit/core": "^6.1.0"

I am building a mini app similar to Infinite Craft, where you can drag objects into a space, and combine them.

My basic setup is like this (this is inside a component which itself is rendered under a DnDContext):

<div id="sidebar">
  {objects.map(obj => <DraggableCard object={obj} />)}
</div>
<div id="space" {...droppableProps}>
  {droppedObjects.map(obj => <DraggableDroppableCard object={obj} />)}
</div>

Since objects can be combined, after a draggable card is dropped, it turns into DraggableDroppableCard which has a nested droppable space in it, so you can drag other objects into it. It also can be moved around freely in the space.

Internally, it looks like this:

<div {...draggableProps}> // have tried switching the order of these
  <div {...droppableProps}>
    {obj.name}
  </div>
</div>

I have tried having the draggable div come both first & last (above/below the droppable) and have noticed the following:

1. With drag first, rendering a droppable inside, I can drag new objects from the sidebar into it, and they combine without issue. However dragging another object that's already in the main droppable space to combine with doesn't do anything. In particular, the event.over inside the onDragEnd callback is null, so I can't tell which object was just dropped onto. The main difference IMO is that sidebar objects are not yet inside any droppable container, but those items in the main space are. Still, I feel like dnd-kit should be recognizing that there's a nested droppable there (the nested droppable's isOver state is also false when hovering over).
2. With drop first, rendering a draggable inside, neither case works - dropping from the sidebar nor moving an existing dropped object into another. So I'm inclined to think option (1) is more correct, but I can't seem to get both cases working.

Short of helping me figure out this issue (which would be most appreciated), it would be awesome to see more Storybook examples using nested droppable areas.

[ssalka]

I actually was able to get this working! What fixed things for me was using a single div for both the draggable & droppable props:

const style = {
  ...(transform && { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` })
};

const setRef = React.useCallback(
  (node: HTMLDivElement | null) => {
    setDragRef(node);
    setDropRef(node);
  },
  [setDragRef, setDropRef]
);

return (
  <div
    {...attributes}
    {...listeners}
    ref={setRef}
    style={style}
  >
    ...
  </div>
);