Is there a way to trigger a function when using isCombineEnabled?

[LK33VY]

Hello,

I'm using @hello-pangea/dnd in my React application, and I'm trying to implement the combining functionality using the isCombineEnabled prop on the <Droppable> component. However, I'm facing some issues with getting it to work as expected.

Currently, I have the following code:

const handleDragEnd = (result) => {
  if (!result.destination) return;

  const items = Array.from(rankings);
  const [reorderedItem] = items.splice(result.source.index, 1);
  items.splice(result.destination.index, 0, reorderedItem);

  if (result.combine) {
    const combinedImage = items[result.destination.index];
    const hoveredImage = items.find((item) => item.id === result.combine.draggableId);

    const newSpecial = combinedImage.special || hoveredImage.special || String.fromCharCode(65 + Math.floor(Math.random() * 26));

    const updatedCombinedImage = { ...combinedImage, special: newSpecial };
    const updatedHoveredImage = { ...hoveredImage, special: newSpecial };

    const combinedImageIndex = items.findIndex((item) => item.id === combinedImage.id);
    const hoveredImageIndex = items.findIndex((item) => item.id === hoveredImage.id);

    if (combinedImageIndex !== -1) {
      items[combinedImageIndex] = updatedCombinedImage;
    }

    if (hoveredImageIndex !== -1) {
      items[hoveredImageIndex] = updatedHoveredImage;
    }
  }

  setRankings(items);
};

return (
  <DragDropContext onDragEnd={handleDragEnd}>
    <Droppable droppableId="rankings" isCombineEnabled>
      {(provided) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
          {rankings.map((image, index) => (
            <Draggable key={image.id} draggableId={image.id} index={index}>
              {(provided, snapshot) => (
                <div
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  className={`image-container ${snapshot.combineTargetFor ? "combine-target" : ""}`}
                  onClick={() => setSelectedImage(image)}
                >
                  <img
                    id={`img-${image.id}`}
                    src={image.src}
                    alt={`Image ID: ${image.name}`}
                    style={{ width: "20rem", height: "auto" }}
                    onContextMenu={handleContextMenu}
                    onDragStart={handleDragStart}
                  />
                  <span style={{ fontSize: "4rem" }}>{image.letter}</span>
                  {image.special && <span className="special-character">{image.special}</span>}
                </div>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </DragDropContext>
);

In the handleDragEnd function, I'm trying to handle the combining logic when result.combine exists. I'm assigning a new special character to both the combined image and the hovered image, and updating the rankings state accordingly.

However, the combining functionality doesn't seem to work as expected. The images don't stay in place when dragging one image onto another, and the special characters are not assigned correctly.

I've tried adding console.log statements to debug the issue, but it appears that the handleDragEnd function is not being triggered when combining images.

Is there a way to trigger a function or callback when using isCombineEnabled? Or is there a different approach I should take to handle the combining logic correctly?

Any guidance or suggestions would be greatly appreciated. Thank you in advance!

Best regards,
K33VY