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"
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 :
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.