React-dnd hijacks out of context "draggable" elements

[rogerfar]

When calling useDrop it will effectively remove all dragging capabilities from your app, even if they are outside the DndProvider container.

See:
https://codesandbox.io/s/festive-sky-muxxt?file=/src/index.js

Try dragging the red square, it's marked as draggable which means it should show the HTML5 dragging overlay.

The issue is that I'm allowing components to be dragged in from outside the DndProvider because it's using react-grid-layout, but react-dnd breaks it.

[tylucaskelley]

Also seeing this. react-dnd version 14.0.4. We have a table component w/ draggable rows that uses react-dnd, but not every other component in the system has been updated to use it as well, and it feels like if its usage is isolated to one place it shouldn't be taking over all drag events

[MinJieLiu]

+1
Is there a solution now?

[RafaelGB]

Reading the documentation I found one way to approach this use case.
Works for me!

// ...
const DnDRef = React.useRef(null);
// ...
<div
      key={`${headerGroup.id}-${headerGroupIndex}`}
      className={`${c("tr header-group")}`}
      ref={DnDRef} <-- Create your context
>
  <DndProvider
        key={`${headerGroup.id}-${headerGroupIndex}-dnd-provider`}
        backend={HTML5Backend}
        context={DnDRef} <-- Use the context you create
    >
    {// ...}
  </DndProvider>
</div>

[Ytime]

It seems that there is something wrong with RafaelGB's solution. DnD don't work correctly.
https://codesandbox.io/s/infallible-bardeen-8fh98f?file=/src/index.js

[RafaelGB]

My use case was to fix an incompatibility with an architecture element used by my component (a plugin). I was able to fix it but finally dispensing with react-dnd.

The problem came in the usedrop declaration since it affects all those components with the "onDrop" event loaded disabling them.

Depends of your case just use native dnd

[Ytime]

Thank you for your reply which solved my doubt!

Some of my imported components use native dnd. These components and react-dnd are not compatible at the same time.😭

[Ytime]

Thank you for your reply which solved my doubt!

Some of my imported components use native dnd. These components and react-dnd are not compatible at the same time.😭

I found the reason why dnd don't work.(referring to #3344)

function DndProviderWrapper({ className, children }) {
  const context = useRef(null);
  const dndArea = context.current;
  const html5Options = useMemo(() => ({ rootElement: dndArea }), [dndArea]);
  return (
    <div className={className} ref={context}>
      {// it is important that DndProvider don't render if dndArea is null }
      {dndArea && (
        <DndProvider backend={HTML5Backend} options={html5Options}>
          {children}
        </DndProvider>
      )}
    </div>
  );
}

// ...
<div>
  <DndProviderWrapper>
    {// ... your component used react-dnd}
  </DndProviderWrapper>
 {// ... your component used native dnd}
</div>

[lionnel-afan]

Thank you all for addressing this !
I had the same issue this week and it wasn't clear what exactly was causing the problem until I figured out it was the DndProvider + useDrop combination.
Ytime's solution works great for my use case (thanks for the solution!), although I had to tweak it a little :

const DndProviderWrapper: React.FC<any> = ({ className, children }) => {
    const context = useRef(null);
    //Make the dndAre a part of the component state otherwise, some times, the content doesn't renders
    const [dndArea, setDnDArea] = useState(context.current);
    //additionally, add a useEffect to track the context reference => might be overkill performance wise but works for my use case
    useEffect(() => {
        setDnDArea(context?.current);
    }, [context])
    const html5Options = useMemo(() => ({ rootElement: dndArea }), [dndArea]);
    return (
        <div className={className} ref={context}>
            {/* it is important that DndProvider don't render if dndArea is null */}
            {dndArea && (
                <DndProvider backend={HTML5Backend} options={html5Options}>
                    {children}
                </DndProvider>
            )}
        </div>
    );
}

[Atrus619]

I had the exact same problem and the above fixed my issue. Should consider merging this into the next release.