No drop events when drop target is on completely different DOM tree

[joeyJsonar]

Hello, I have a case below where the draggable (field list on the right most) and target (aggregation builder for visualization on the left of the field list). The left and right are completely different components.

The code for the field list is:

  useEffect(() => {
    if (isDraggable) {
      const el = fieldRef.current;

      return combine(
        draggable({
          element: el!,
          getInitialData: () => ({ field }),
        })
        // dropTargetForElements({
        //   element: el!,
        //   onDragEnter: ({ source }) => {
        //     console.log('XXX:enter:XXX');
        //     console.log(source);
        //   },
        //   onDragLeave: () => console.log('leave'),
        //   onDrop: () => console.log('XXX:drop:XXX'),
        //   // canDrop: () => true,
        // })
      );
    }
  }, []);

If I uncomment the dropTargetForElements, I do get the log for the drop events.

The code for the drop target, at aggregation builder is:

  useEffect(() => {
    const el = fieldSelectRef.current;

    return dropTargetForElements({
      element: el!,
      onDragEnter: ({ source }) => {
        console.log('XXX:enter:XXX');
        console.log(source);
      },
      onDragLeave: () => console.log('leave'),
      onDrop: () => console.log('XXX:drop:XXX'),
      // canDrop: () => true,
    });
  }, []);

Here, no logs are ever logged.

Don't know what I am doing wrong.

One caveat: We still have react-beautiful-dnd on some part of the system.

[joeyJsonar]

Just update, I tried removing react-beautiful-dnd and still not working.

[joeyJsonar]

After further debugging. I noticed that if I am far away from the nest of react components the registry inside the pragmatic library is different and is empty, causing no drag drop event to be emitted.

Will investigate further and report back.