Using Dom nodes in a popup content function (api v4.5)

Question

Running into a couple of popup issues new in 4.5 api version. If I have a simple popup content function that returns a domnode, the domnode is refreshed every time the popup moves. This isn't a big deal for simple popup contents, but if I have a 3rd party javascript library working in the popup, it breaks because the element is removed/reinserted.

https://codepen.io/anon/pen/WZJaBj?editors=0010

Anyone have some suggestions on how to workaround this?

NathanielRindlaub · Answer

I think I answered my own question. For anyone interested, it's perfectly acceptable to render react components using reactDOM.render() right in the popup's DOM node. Here's an example of that, and an explanation in React's docs confirming that that's a valid approach. I'm new to React and didn't know this, but to quote the docs, "Although React is commonly used at startup to load a single root React component into the DOM, ReactDOM.render() can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app. In fact, this is exactly how React is used at Facebook."

NathanielRindlaub · Answer

Hey there, I'm curious whether you ended up re-writing the popup from scratch or whether you were able to leverage the popupViewModel. I'm in a similar situation... I'd love to use a react component to render the popup content but I'd prefer not to lose the ESRI out-of-the-box popup positioning logic. Any advice you might have would be much appreciated!

GreggRoemhildt1 · Answer

You may be able to use the popupViewModel to help out with this, though I haven't done that before.

That's an interesting idea, I'll have to look into that a bit. It would be ideal since, I don't want to have to re-write all of the popup positioning logic that comes with the api.