Select to view content in your preferred language

Calcite components not showing in popup of JS API 4.24

836
4
Jump to solution
06-28-2022 04:44 AM
FC_Basson
MVP Regular Contributor

With the release of the new Javascript API 4.24,  Calcite components are not being displayed and rendered properly in the popup.   Upon inspection of the DOM, all calcite component tags have been cleared/removed and only the text of the components is being displayed.  It was working fine with the 4.23 version of the JS API, so unless I'm missing something when setting the content for the popup, I'm suspecting this is a bug.  I've tested it in the Sandbox samples too and getting the same result.

0 Kudos
1 Solution

Accepted Solutions
BenElan
Esri Contributor

The JSAPI has an html sanitizer which may be causing the issue for you. I wrote a blog about it a while ago: https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/using-html-with-popups-in-the-arcgis...

You can still use a string to create the popup content like this: https://codepen.io/benesri/pen/zYWYzKa?editors=1010

It sounds like it may not be an issue with 4.24 since your codepen also doesn't work in 4.23. What is likely happening is the components you are using now are being sanitized, but the ones in the production app are not. If you are able to confirm that it is a JSAPI regression from 4.23 to 4.24, I suggest posting on their Community page or submitting a support ticket. 

Let me know if you have any additional questions, I'm happy to help!

View solution in original post

4 Replies
BenElan
Esri Contributor

Hi @FC_Basson, can you please provide a codepen that reproduces the issue? It is working for me: https://codepen.io/benesri/pen/XWEWRzR?editors=1010

 

0 Kudos
FC_Basson
MVP Regular Contributor

Hi @BenElan 

I see in your codepen that the content is a DOM object that is created.  

With this codepen (https://codepen.io/fcbasson/pen/JjLjNQB) I am creating the HTML content as a string, and this method has been working for me so far.  After I changed to 4.24 this method "broke", but I also picked up that by setting the API to 4.23 in my codepen also does not work.  For my production app I'm creating calcite tabs with dynamic content that is set as the popup content, which has been working for me up to now.  From my understanding, HTML content in the popup can be set with a string, but I'm obviously missing something.

0 Kudos
BenElan
Esri Contributor

The JSAPI has an html sanitizer which may be causing the issue for you. I wrote a blog about it a while ago: https://www.esri.com/arcgis-blog/products/js-api-arcgis/mapping/using-html-with-popups-in-the-arcgis...

You can still use a string to create the popup content like this: https://codepen.io/benesri/pen/zYWYzKa?editors=1010

It sounds like it may not be an issue with 4.24 since your codepen also doesn't work in 4.23. What is likely happening is the components you are using now are being sanitized, but the ones in the production app are not. If you are able to confirm that it is a JSAPI regression from 4.23 to 4.24, I suggest posting on their Community page or submitting a support ticket. 

Let me know if you have any additional questions, I'm happy to help!

FC_Basson
MVP Regular Contributor

Thanks for the info! Can't believe I missed that post.  That might well be the issue.  Even the popups are using sanitizer!  

0 Kudos