Is it possible to put a form element (say Input) inside ArcherElement?

[rishitells]

Firstly, thanks a lot for such a useful library! This is of really great help :)

Coming to my requirement, I was building a flowchart/concept-map kind of thing and need some of the nodes to be editable. I tried to put <input> inside <ArcherElement>, but it didn't work because of the SVG overlay. I tried putting <input> inside <foreignObject>, but it didn't help either.

Is there any way to put form elements/content editable DIVs inside ArcherElements?

[pierpo]

Hello 😊
Thank you for the kind words!

It has to be possible 🤔
I'll have a look!

[pierpo]

So, here's what I found:

• it works out of the box for me if I put an input in the label props of a relation
• it does not work immediately if I put it in an ArcherElement indeed. However, it does work if I disable the pointer-events from the SVG container.

<ArcherContainer svgContainerStyle={{ pointerEvents: 'none' }}>
  <ArcherElement {...stuff} >
    <input type="text" />
  </ArcherElement>
</ArcherContainer>

It's not 100% satisfying because you might need the pointer events on the SVG container. I need to think this through, I'm not 100% clear on this.

Anyway, does this solution solve your case? 😊

[pierpo]

Btw, this is related to #85

[rishitells]

Hey, thanks a lot man! This solution worked perfectly for my use case! 😊

[pierpo]

Cool, glad to hear it 😊
The PR #85 should help in making this clearer (needs some rework to not change the defaults though).

[AntoineGlacet]

Hello, I am confused on how to put an input as label of an arrow and I could not get it from this thread. @rishitells , would you kindly share what you put exactly in label?