Not able to Select and copy Text or click a link inside a Node.

[gvirus21]

Describe the Bug

I am trying to create a flow diagram using react-flow, everything is working fine but I am not able to interact with the data within my custom node, (copying text or clicking a link from a node). I know we have "grabbing" as a default behavior but it would be nice if we could also interact with the inner content, maybe with a double-click on a node we can select the inner text.

I have already tried adding "pointer-events: all" to my custom message, but it didn't work. If it should work then am i doing something wrong?

Steps to Reproduce the Bug or Issue

Try to select any text from a Node.

Expected behavior

Should be able to copy the text, or click on a link

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS]
• Browser: [ Chrome, Safari, Firefox]

Additional context

No response

[bcakmakoglu]

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

[gvirus21]

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 :)

[bcakmakoglu]

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

[gvirus21]

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

[bcakmakoglu]

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 ^^

[gvirus21]

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.

[bcakmakoglu]

Try this:

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

Here's another sandbox.

[gvirus21]

Try this:

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

Here's another sandbox.

Awesome ser, that worked! 🥳