Not able to Select and copy Text or click a link inside a Node. about xyflow HOT 8 CLOSED

Try this:

<div style={{ userSelect: "text" }} className="nodrag nopan">
  {data.label}
</div>

Here's another sandbox.

from xyflow.

These are class names that you can apply to elements where you want to disable initiating drag/pan. See this section of the docs.

from xyflow.

Did you try using nodrag / nopan as class names on the elements in question? :)

from xyflow.

Did you try using nodrag / nopan as class names on the elements in question? :)

No no, I didn't. where should I use them btw? As a className or as a prop to the <ReactFlow /> comp? Thanks :)

from xyflow.

Hmm interesting, it disabled the dragging but didn't solve my issue. i am still not able to select text using my cursor.

from xyflow.

Mh... works fine for me: https://codesandbox.io/p/sandbox/cranky-elbakyan-s65tzg?file=%2Fsrc%2Fnodes%2FPositionLoggerNode.tsx%3A18%2C31

Edit: Sry had the wrong clip in it before ^^

from xyflow.

Mh... works fine for me: https://codesandbox.io/p/sandbox/cranky-elbakyan-s65tzg?file=%2Fsrc%2Fnodes%2FPositionLoggerNode.tsx%3A18%2C31

Screen.Recording.2024-03-20.at.15.55.14.mov
Edit: Sry had the wrong clip in it before ^^

Thanks so much for the demo with the Codesandbox brother, but I was actually trying to copy the label, in this case, i want to copy the text "drag me!" or "wire". If there is any way we can make them selectable by mouse that would be helpful.

from xyflow.

Try this:

<div style={{ userSelect: "text" }} className="nodrag nopan">
  {data.label}
</div>

Here's another sandbox.

Awesome ser, that worked! 🥳

from xyflow.