HTML tags are not rendered within Instant Search results

Open Q&A
#1

Hello,

I am trying to fix an issue with an HTML search property in instant search results.

I have the below record in Algolia Index. Please note that the description field has some HTML tags.

{
  "hits": [
    {
      "product_title": "Lorem ipsum",
      "description": "Veniam id sit nisi voluptate.<br>Non duis do ad minim. Id <strong>Lorem laborum</strong> exercitation et reprehenderit.",
      "retailer_name": "Awesome Retailer Ltd"
    }
  ]
}

This is the hits widget:

hits({
    container: '#results-list',
    templates: {
        item(hit, { html, components, sendEvent }) {
            return html`
                <div>
                    <p>${ hit.description ? hit.description : "" }</p>
                    <p>${ components.Highlight({ attribute: 'retailer_name', hit })}</p>
                    <a href="${ hit.url }"
                        onClick="${() => { sendEvent?.('click', hit, 'Product Clicked'); }}"
                    >${ components.Highlight({ attribute: 'product_title', hit })}</a>
                </div>
            `;
        },
    },
})

Here are the results I am getting.

image

I would like to render the HTML for the first field. I have fields to highlight too.

Also, am I sending the click analytics correctly using the sendEvent here?

I am using “algoliasearch”: “^4.14.2”, “instantsearch.js”: “^4.44.1”

Any help would be highly appreciated.

Many thanks
John