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

1241
6
10-10-2017 08:21 AM
GreggRoemhildt1
Occasional Contributor

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?

Tags (1)
0 Kudos
6 Replies
ThomasSolow
Occasional Contributor III
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.

0 Kudos
GreggRoemhildt1
Occasional Contributor

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.

0 Kudos
ThomasSolow
Occasional Contributor III

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.

GreggRoemhildt1
Occasional Contributor
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.

0 Kudos
NathanielRindlaub
New Contributor III

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!

0 Kudos
NathanielRindlaub
New Contributor III

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

0 Kudos