Obscuring `react-dnd` dropTargets inside of a DockView in 1.6.0 about dockview HOT 4 CLOSED

Closing since this is working in the latest version. Example included on docs website now with panels using third-party dnd controls at https://dockview.dev/docs/components/dockview#third-party-dnd-libraries

from dockview.

Hi - Yes I guess there could be some conflict here that I haven't accounted for in terms of external dnd events. I will certainly take a look at fixing it though since dockview shouldn't interfere with other libraries, or at a minimum it should provide a way to prevent the interferance.

Would it be possible for you to add a small example just so I can see the exact problem? Potentially adding a react-dnd item into this existing sandbox (https://codesandbox.io/s/github/mathuo/dockview/tree/master/packages/docs/sandboxes/simple-dockview) to show the problem?

from dockview.

Thanks for a quick response, @mathuo !

I created two example sandboxes, one with react-dnd on top of the tree, one inside of dockview:

https://codesandbox.io/s/dockview-treeview-4eu1p1 - top
https://codesandbox.io/s/dockview-treeview-dnd-inside-811g65 - inside

In both cases, the drag-and-drop behavior of both components is broken.

from dockview.

Amazing, thank you. Two findings from some very quick work (so I may be wrong):

• react-dnd intercepts dnd events within it's scope (which dockview would be) and will call .preventDefault() on dragStart events if it thinks the drag event isn't valid. It seems dockview doesn't set some properties which technically should be set according to some dnd specs so react-dnd invalids the dragStart events through .preventDefault() - you'll see this in the workings in both of your examples because the tabs are no longer draggable. To fix this I will set some additional properties on the drag events I am creating to conform to some technicalities.

You can see this here in the react-dnd source code where it treats any drag events without a valid dataTransfer.types to be invalid.

• You're findings in dropTarget.ts seem valid to me and that calling .stopPropagation() here isn't great because it has the potential to interfer with external events. To fix this I will remove .stopPropagation() here and selectively apply it only when I know that the event should be intercepted by dockview and used by nobody else.

I've started a branch but will need a bit of work to fine tune the two fixes above. Here is a link to a sandbox of your example built from that branch, let me know if this looks better?

from dockview.