Problem with popups in 4.13 and later

[ShawnMoore]

I've been trying to get my map to display a popup when a point on my feature layer is clicked and it looks like something has changed between ArcGIS js api 4.12 and 4.13 (and later) that breaks my code.    I didn't see any notes in the release notes that indicated any required code updates for moving to later versions of the api. 

Here's a code pen with the broken popup template (I've distilled this example to a very very basic map) 

Link to Codepen

Run the code pen to recreate the problem (try clicking any point),  then change the 2 api references from 4.13 to 4.12 and the popups work fine when you click a point on the map.

Anyone know why this works in 4.12 and not in 4.13 (or 4.16)?

Thanks!

Shawn

[RobertScheitlin__GISP]

Shawn,

   If you switch your code to use JS API Next url then your code works fine.

<script src="https://js.arcgis.com/next/">‍

So there has been a bug for a couple of version with this.

[ShawnMoore]

Thanks, Robert, getting closer....

The next branch gets us closer, but I think the new code has at least 1 more problem.    I switched to next on my more detailed production map and had to make sure the outFields: was specified as all fields ( "*") otherwise it wouldn't work. 

From there I thought I was done until I clicked on my link in the popup.   (There's a link that takes the user to a specific properties page for the point on the map.) 

In next any relative link is replaced with a link to the actual map html page.   If I switch to 4.12, I get my relative link to my properties page, but next seems to wipe that out in favor of the current page.    

It's a bit harder to show on code pen, but here's the pen.  https://codepen.io/snmoore/pen/wvGNReZ    If you change from 4.12 to next you can see the different in the url when you hover over the details link in the popup. 

-Shawn

[RobertScheitlin__GISP · Accepted solution]

Shawn,

  Use a function to set the content and it avoids the sanitization of the popup content.

                var propertiesTemplate = {  // autocasts as new PopupTemplate()
                    title: "<h5><strong>{bname}</strong></h5>",
                    content: contentFunc
                };
          
                function contentFunc(feature){
                  var div = document.createElement("div");
                  div.innerHTML = "123 Main St.<br/><br/>" +
                        "<strong>" + feature.graphic.attributes.category + ":</strong> 0.345<br/><br/>" +
                        '<a target="_blank" href="mydetailpage.html?id=12345">View Details Page</a>'
                  return div;
                }‍‍‍‍‍‍‍‍‍‍‍‍

[ShawnMoore]

Thanks Robert this solved the problem!

note:  I also had to add an outFields property in my propertiesTemplate with "*" to make other fields available in my more detailed production template.  

i.e.

            var propertiesTemplate = {  // autocasts as new PopupTemplate()
                title: "<h5><strong>{bname}</strong></h5>",
                outFields:["*"],    // specify outfields of * to get access to all fields in your content function
                content: contentFunc
            };‍‍‍‍‍

-Shawn