Drop down labels not rendering html code

[abhisahni]

Hi,

I am using the dropdown element and I am binding it to an array of objects. I have a Javascript function which when given a mapping object returns html to display and image and a name, but when I set the label for the drop down the html is rendered as markup and not the image and name.

I know my JS function and labels work since I am using it in a Search with results element and it works.

Any pointers on why this isnt working for dropdowns? Screenshots attached below.

Thank you

[Agustin_Carozo]

Hi Abhi

The Dropdown element renders option labels as plain text (escaped), on purpose, for security and performance reasons. It doesn’t parse or inject HTML inside options, so <img>, <div>, etc. will be displayed literally. That’s why the same mapping works in Search with results (which supports templating) but not in Dropdown.

Dropdown supports strings (and simple values) for its labels; rich markup inside options isn’t supported.

I think the best way to tackle this issue is to try and create your own custom dropdown, which could go something like this:

Example

1. create a variable selected (object or id) and isOpen (boolean).
2. add a button that shows the current selection (you can include an Image + Text inside the button).
3. when clicked, toggle isOpen.
4. below it, add a Repeater/List bound to your array; inside each row, use an Image + Text with your desired layout.
5. on row click: set selected to the clicked item and set isOpen = false.
6. optional: close on outside click and add keyboard focus styles.

Hope this helps