Drop and hover not triggering on DropTarget, isOver never true.

[SatendraRaghav]

I encountered an issue with my application's drag-and-drop functionality. The setup involves a component panel containing draggable items and a canvas serving as the drop target. In the browser environment, everything works as expected: when I drag a component onto the canvas, the isOver state correctly becomes true, facilitated by the collect method of the useDrop hook.

However, when I run the application in Desktop Integrated Development Environments (IDEs) like VSCode, the isOver state consistently remains false. Upon investigating, I discovered that the hover method is encountering an issue, as the source ID of the canvas (the drop target) stored in React DnD is incorrect.

Interestingly, when I utilize the react-dnd-touch-backend, the functionality works smoothly even in Desktop IDEs. Additionally, I observed that if I implement my custom onDragEnter or onDragCapture events on the canvas div and update a local variable, the functionality works consistently across all environments I'm seeking guidance on how to resolve this discrepancy and ensure consistent behavior across all environments.

Here's the useDrop method code:

const [collectedProps, dropRef] = useDrop<
DragInfo,
DropResultInfo,
DropCollectedProps
>(
() => ({
  accept: ["components"],
  canDrop: () => {
    return isEditMode;
  },
  drop: () => {
    return {
      isDropOnCanvas: true,
    };
  },
  hover: (_item, monitor) => {
    return monitor.isOver();
  },
  collect: (monitor) => {
    return {
      isOver: monitor.isOver({ shallow: false }),
    };
  },
}),
[
  isEditMode,
  unitWidth,
  fixedBounds,
  scrollContainerScrollTop,
  displayName,
  containerListMapChildName,
]
);

And here's how dropRef is used by the

:

<div
  ref={(node) => {
    dropRef(node);
    innerCanvasRef.current = node;
  }}
  css={dropZoneStyle(canvasHeight)}
  onClick={handleClickOnCanvas}
>
  {/* other components */}
</div>

For implementing useDrag with all components, here's the code:

 const [, dragRef] = useDrag<DragInfo, DropResultInfo,any>(
      () => ({
        type: "components",
        canDrag: () => {
          return isEditMode
        },
        end: (draggedItem, monitor) => {
          const dropResultInfo = monitor.getDropResult()
          const { draggedComponents } = draggedItem
          sendShadowMessageHandler(-1, "", [], 0, 0, 0, 0, 0, 0, 0, 0)
          endDragMultiNodes(
            draggedComponents,
            !!dropResultInfo?.isDropOnCanvas,
            true,
          )
        },
        item: () => {
        
          return {
            draggedComponents: // componentConfig,
            dragEffect: //string
          }
        },
      }),
      [isEditMode],
    )
    

And here's how dragRef is used by the :

<div
      // style={{background:isDragging?"red":"green"}}
        css={itemContainerStyle}
        ref={dragRef} 
      >
        <span
          css={iconStyle}
        >
          {icon}
        </span>
        <span css={nameStyle}>{widgetName}</span>
      </div>

[ckdwns9121]

If you are developing a Windows program, ex) electron, tauri

You can solve it by false attributes such as file_drop_handler.