nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Calcite components not showing in popup of JS API 4.24

FC_Basson

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.

Find more posts tagged with

Accepted answers

BenElan

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-api-for-javascript/

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!

All comments

BenElan

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

FC_Basson

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.

BenElan

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

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

FC_Basson

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.