foreignObject on renderNode method not catching onClick event

[gilneto8]

Is your feature request related to a problem? Please describe.
I'm trying to personalize my node interface with some HTML on a ReactJS context, and I'm trying to make this HTML trigger some events (e.g. onClick). To this end, I've overridden the renderNode method and inserted the code for all the interface I wanted, including a foreignObject with the HTML I needed (with the event listeners and everything). However, none of the listeners are triggered when the event is fired.
I've created this question with a little more detail and snippets, feel free to check it.

Describe the solution you'd like
Well, it's pretty obvious, I guess: I just needed the events to be thrown and the listeners to be triggered.

Describe alternatives you've considered
on my Stack Overflow post there are a few more details, but I tried adding references to each node and adding event listeners manually. This also didn't work, but I managed to be able to throw the correct event - even though I wasn't able to control it...

Additional context
I'm using:

    "react": "^16.6.1",
    "react-digraph": "^6.0.0",
    Google Chrome Version 72.0.3626.119 (Official Build) (64-bit)

Edit:
I am aware that this isn't specifically a library feature as it is a potential problem with my usage of the SVG library. However, since it is rather counterintuitive to implement this method, I'm not fully aware where the problem lies. Maybe you guys can help me get there.

Thanks.

Edit2:
My main objective was to achieve this type of interface to both the nodes and the edges. The problem I presented was specifically for the nodes, but I'm feeling that applying this logic to the edges will also pose a problem.
Perhaps this should indeed be considered a feature request, as it would make sense to include a way for the user to achieve the usual functionalities (delete, insert, edit nodes/edges) using the visual interface and the mouse.

Thank you.

[ajbogh]

Hi @gilneto8. Thanks for linking to the SO issue. I've done some playing around with the example website and created some code that will return the d3 event to the onSelectNode function. The function now takes a second optional parameter called event. With this event you can determine the srcElement, which would be your foreignElements.

The problem is that React doesn't make it easy to execute the onClick event of a node from the DOM element, you have to use a ref instead. If you can figure out how to access a ref from a returned element (using the id, or class, or some unique information), then you would be able to execute any function from the ref, including your onClick method (someRef.click()).

See #130