Giters

minop1205 / react-dnd-treeview

A draggable / droppable React-based treeview component. You can use render props to create each node freely.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Drag start issue

walpolsh opened this issue · comments

commented

Describe the bug
Dragging doesn't start the first time when you start to drag a node, and seems to grab the whole div without initiating the drag event?
https://user-images.githubusercontent.com/23249640/204638337-8f1839a5-c9c4-4612-90ea-dedb7eb35672.mov

To Reproduce
I copied a reduced example over to codesandbox but it works totally fine there:

Codesandbox Example

So, I'm thinking this might not be a bug with the package as much as an event listener higher up in my App interrupting the drag start or something? Does anyone have an idea what might be causing this behaviour and how to track it down?

  • OS: 11.5.2 Big Sur
  • Browser: Chrome Version 107.0.5304.110 (Official Build) (arm64) and Safari Version 14.1.2 (16611.3.10.1.6)
commented

@walpolsh What is the version of the package?
If it is not up-to-date, try the latest version.

npm install @minoru/react-dnd-treeview@latest
commented

@minop1205 Sorry, forgot to mention in the OP. I'm on 3.4.0 which should be the latest.

commented

Actually, I've downgraded to 3.3.0 because I started getting this error after installing to 3.4.0. We don't use framer-motion, seems like its a dep for this package.

./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs Can't import the named export 'Children' from non EcmaScript module (only default export is available)

edit: ^ could this have something to do with react-scripts? I'm on 4.0.0 currently

commented

So, I added this effect to the Tree's parent component to see if drag start was firing:
useEffect(() => { //drag events only occur when the false drag does. window.addEventListener("dragstart", (e) => console.log("drag start window", e)); return () => window.removeEventListener("dragstart", (e) => console.log("removed")); }, []);
(^This only works locally for some reason, I added this to the codesandbox too but it locks up the browser, so i left it commented out)

I also added onDragStart to Tree like this:
onDragStart={(e) => console.log(e, "drag start tree")}

It seems like the window event listener only picks up the false dragging, but not the actual dragging:

Screen.Recording.2022-11-30.at.10.32.19.AM.mov
commented

I may have found the root of this issue: there are multiple DndProviders on my local copy and I believe they are conflicting somehow. I've tried wrapping the whole app in just one DndProvider but the components using the
plain react-dnd library throw this error when using the MultiBackend:

Uncaught Error: You must specify at least one Backend, if you are coming from 2.x.x (or don't understand this error)
        see this guide: https://github.com/louisbrunner/dnd-multi-backend/tree/master/packages/react-dnd-multi-backend#migrating-from-2xx

The bug also remains when wrapping the individual components in separate providers. The only thing that makes it work is removing all Providers except for the one wrapping the Tree component from react-dnd-treeview.

commented

It turns out the non tree dnd DndProviders needed me to pass the document to the context prop. Weird lol, anyways thanks