Createportal / react-cytoscape

[jcuypers]

Hi,

I'm trying to use an existing react-cytoscape component from within a popup window (window open) / createportal. For this I use a Portal setup in react, This maintains the react virtual hierarchy/state while the actual component being elsewhere in the DOM.

Mostly it works, but I am struggling with the events. The events keep persisting on the original (virtual?) DOM location as before the move.

As long as the react-cytoscape component is outside of the portal it works. for example, if I have an onclick for a node, I can display info about the selected node in the portal windows.

When I try to include it in the portal as well, the problems start. (so when i would click on a node inside the new window, some minor visual activity happens, but it doesn't do anything else. however when i move outside of the actual newly create window (even outside of the region where the original container was). the node starts to move

Approaches which I have tried :

• Use a forwardRef and set it to the newly created window and try to use it as a condition for binding/rebinding when the original binding are created.
• I tried to deregister, and recreate some event binding inside my "NewWindow"

I have to admit that my knowledge on this is limited and as I came across the following, I was wondering whether it is at all possible? https://jwwnz.medium.com/react-portals-and-event-bubbling-8df3e35ca3f1 (React DOM <> actual DOM), Synthetic events etc

Feedback / ideas would be appreciated.

[jcuypers]

The problem lies withing cytoscapejs binding some event listeners to the window instead of the container