Any way to debug?

[growthwp]

Hey!

We're currently testing a replacement for react-beautiful-dnd and this library seems to be killer! I went through all the examples, the code and so on and it all looks neat.

Well, until I load it on local and it doesn't work anymore. I can see that it's clearly recognizing the droppable area and that it gives me the correct id of the droppable area, but...it doesn't actually drop. When I let go of the mouse inside the droppable, the item just reverts back to its original location. I can see that the DOM hasn't changed either, the draggable doesn't become a child of the droppable.

Problem is, I've no idea how to even debug this. I copy-pasted the implementation from the docs and that's that. I cleared all possibly-problematic CSS as well.

What's my next step here?

[ranbena]

If you can put up a codesandbox example, I'll point you to the bug.

[growthwp]

@ranbena Sorry for the delay. I was actually trying to figure a way out to debug so the next time I see an issue happening, I know what to do but to no avail, here's the repo: https://codesandbox.io/s/competent-platform-1h4he?file=/src/App.js

Sorry if this is some typo that I'm too dumb to catch but I look at it 10 times now and no luck.

[growthwp]

@ranbena Please ignore. I'll post exactly what went wrong. So. I come from a very different background and was expecting something else. This was me missing key information (that also speaks to the architecture of the kit itself). Precisely:

  function handleDragEnd(event) {
    if (event.over && event.over.id === "builderContainer") {
      setIsDropped(true);
    }
  }

So, the way dndkit seems to work is that you need to keep track of if a draggable was dropped or not yourself. I was under the assumption that would be automatic, as in, if I drag a draggable into a container, it would automatically insert itself.

The second misunderstanding - and this is kinda weird, is that I need to put the <Draggable /> markup inside the <Droppable /> myself. Now that's kinda...weird. Speaking of this conditional rendering:

    return (
    <DndContext onDragEnd={handleDragEnd}>
      {!isDropped ? draggableMarkup : null}
      <Droppable>{isDropped ? draggableMarkup : "Drop here"}</Droppable>
    </DndContext>
  );

Not gonna lie, I take full responsibility for this but this requires another layer of abstraction on top to make it work properly. You can't just hardcode the markup like that.

So, unless I'm wrong, a thing to keep in mind is that you need a higher-level abstraction to keep track of what's being dropped, lookup the corresponding markup for that drop (in 95% of the cases it'll be the same thing you're dragging) and then keep track of the state of the draggable: dropped or not dropped.

[ranbena]

Basically, yes. It's up to the consumer to handle the drop.
You can take a look at how this example was implemented here. Instead of isDropped it sets the parent id to determine where the draggable should be rendered.

As for your suggestion, perhaps @clauderic can chime in.

[clauderic]

So, the way dndkit seems to work is that you need to keep track of if a draggable was dropped or not yourself. I was under the assumption that would be automatic, as in, if I drag a draggable into a container, it would automatically insert itself.

That's correct, the library follows the declarative nature of React, and gives full control over to consumers as to whether or not items should be moved from one container to another on drop.

The library itself simply facilitates detecting which draggable was picked up, whether it is moved over a droppable, and where it was dropped. It does not move draggable elements for consumers from one position in the React tree to another. Doing so would perhaps require less setup for consumers, but it'd also be extremely limiting.

This is stated in the onDragEnd documentation of DndContext: