bkrem/react-d3-tree

draggable prop issue

chirag1718 opened this issue · 3 comments

chirag1718 commented

Thank you for taking the time to report an issue with react-d3-tree!

Feel free to delete any questions that do not apply.

Are you reporting a bug, or opening a feature request?

I'm reporting a bug

What is the actual behavior/output?

I'm facing an issue with the "draggable" prop sometimes it work perfectly and sometimes it doesn't even work even though it is true. Like whenever I'm starting the server it work after 2 or 3 reloads and if I reload the page it does not work.

<div className="h-full w-full flex items-center justify-center bg-purple-300"> <div className="flex items-center justify-center border h-[800px] w-[1000px] overflow-auto" > <Tree data={orgChart} draggable={true} orientation="vertical" pathFunc="step" zoomable={false} collapsible={false} /> </div> </div>

ZacharyHangoc commented

Same issue

hakverir commented

Experiencing a similar issue, the exact same with https://stackoverflow.com/questions/77272006/react-d3-tree-zoom-and-drag-not-working-on-next-js-13

everything's fine locally, but dragging and zooming does not work on the client side.
Using next 13.4.8, react-d3-tree 3.6.1. There are no difference errors or warnings given by any packages

Abutler101 commented

I had this issue with next 14.0.3, react-d3-tree 3.6.1 with dragging working intermittently (maybe 1 in 10 refreshes it work) and zooming not working at all.

I came across https://stackoverflow.com/questions/62944931/nextjs-issue-with-server-side-rendering-with-react-d3-tree which seems tangentially related and seems to me to suggest that Next is being overly eager with SSR and that is messing with the client side interactions. The solution: https://stackoverflow.com/a/65697349 looks to have worked for me

TLDR:
if you have your use of react-d3-tree in component X defined in File B, imported into File A which contains the 'top level page', change the import of X from B to a dynamic import:
Replace

import X from "@/Blah/Blah/components/B";

With

const X = dynamic(
    () => import("@/Blah/Blah/components/B"),
    { ssr: false }
);
  • ❤️1