topic Using Dom nodes in a popup content function (api v4.5) in ArcGIS JavaScript Maps SDK Questions

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

GreggRoemhildt1 — Tue, 10 Oct 2017 15:21:33 GMT

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?

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

ThomasSolow — Tue, 10 Oct 2017 16:30:23 GMT

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.

Could you go into more detail about this? I can add an event listener to the node that gets inserted and that event listener will remain active after you pan the map around. It's the same node.

I'm not sure why the content node is removed and then re-inserted as the map is panned. This could be a bug or there might be a good reason for it.

The simplest workaround I can think of is just to add a setTimeout(()=>node.classList.remove('animated', 'fadeIn'), 1000) to your function. 1000 because the duration of the animation is 1000.

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

GreggRoemhildt1 — Tue, 10 Oct 2017 17:06:03 GMT

> Could you go into more detail about this?

So, I'm rendering a component using Canjs into the popup. Its similar to how a react component works.The first time the template is viewed, it works well, even panning the map despite the dom node getting removed/inserted. But if I switch features and go back into the feature I previously visited, the template does not get rendered correctly.

I'm assuming you might see the same thing with your event handler, if you toggle back and fourth between features, does it still work? I don't have a test case for this but that's what I'm seeing in my app.

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

ThomasSolow — Tue, 10 Oct 2017 19:01:08 GMT

My feeling is that the most straightforward way to do this would be to write your own pop-up component using whichever JS framework you're using and use that instead of the standard popup template. You may be able to use the popupViewModel to help out with this, though I haven't done that before.

There may be a way to reliably render a third party component inside the popup reliably but my guess is that it would be a pain and you're probably going to run into issues with it playing well with the popup.

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

GreggRoemhildt1 — Wed, 18 Oct 2017 15:01:10 GMT

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.

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

NathanielRindlaub — Tue, 12 Feb 2019 19:24:49 GMT

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!

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

NathanielRindlaub — Wed, 13 Feb 2019 00:48:08 GMT

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