Select to view content in your preferred language

PopupTemplate Content strips HTML Data-* Attributes in 4.16

1681
2
Jump to solution
07-25-2020 05:41 PM
BernardConrad
New Contributor

Working with the ArcGIS JavaScript API version 4.13 and was able to build popup templates that included data attributes to work with the Semantic UI library for their Tab module (https://semantic-ui.com/modules/tab.html). I recently upgraded to version 4.16 and now the template is broken. Upon examining the html when rendered it strips key data-attributes for tabs (data-tab) prevent it from working. Is there a way to force explicit content and prevent the template from being modified in version 4.16 or if this expected going forward? Thanks.

Example (Click on the map to launch the popup)

Version 4.13 Working: https://codepen.io/booshwa/pen/ExPJgRz 

Version 4.16 Broken: https://codepen.io/booshwa/pen/qBbwaJB 

0 Kudos
1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

There was a breaking change in 4.14 where HTML code will be sanitized

The HTML sanitizer was added to all widgets to sanitize and escape strings according to the ArcGIS Online supported HTML specification. This can cause HTML set in PopupTemplate.content or in other widgets to be removed.

Take a look at this blog that shows how to modify the popup's DOM directly

Using HTML with Popups in the ArcGIS API for JavaScript 

View solution in original post

2 Replies
KenBuja
MVP Esteemed Contributor

There was a breaking change in 4.14 where HTML code will be sanitized

The HTML sanitizer was added to all widgets to sanitize and escape strings according to the ArcGIS Online supported HTML specification. This can cause HTML set in PopupTemplate.content or in other widgets to be removed.

Take a look at this blog that shows how to modify the popup's DOM directly

Using HTML with Popups in the ArcGIS API for JavaScript 

BjornSvensson
Esri Regular Contributor

FYI - I answered the exact same question at
 https://gis.stackexchange.com/questions/368729/popuptemplate-content-strips-html-data-attributes-in-... 

Pretty much the same answer, but a few hours later...

0 Kudos