Facing a weird problem with aura:unescapedHtml tag.

Background: Working on adding custom onclick handler for formula fields in lightning component; navigation using $A.get("e.force:navigateToURL").

If I do not use aura:unescapedHtml tag, with hardcoded HTML content; code works and add click listener. Apparently it does not work with that tag.


<aura:component implements="force:appHostable,flexipage:availableForRecordHome" extends="c:Base">

    <aura:handler name="init" value="{!this}" action="{!c.onInit}"/>

    <aura:attribute name="value" type="Object" required="false" access="public" description="Value of formula"/>

    <div class="slds-card" aura:id="container" id="{!'container-' + globalId}">
        <aura:unescapedHtml value="{!v.value}"/>

    <!-- With the following hardcoded content, listener is added -->
        <div class="slds-card" aura:id="container">
            <a href="/0033D00000NbRmxQAF" target="_blank">Test contact 1</a>&nbsp;|&nbsp;
            <a href="/0033D00000NbRmwQAF" target="_blank">Test contact 2</a>&nbsp;|&nbsp;
            <a href="https://www.google.nl/" target="_blank">google.com</a>&nbsp;|&nbsp;
            <span>No link</span>


    onInit: function (component, event, helper) {

        var value = '<a href="/0033D00000NbRmxQAF" target="_blank">Test contact 1</a>&nbsp;|&nbsp;' +
            '<a href="/0033D00000NbRmwQAF" target="_blank">Test contact 2</a>&nbsp;|&nbsp;' +
            '<a href="https://www.google.nl/" target="_blank">google.com</a>&nbsp;|&nbsp;' +
            '<span>No link</span>-test';
        component.set("v.value", value);

        setTimeout($A.getCallback(function() {

            // javascript version - doesn't work
            var container = document.getElementById('container-' + component.getGlobalId());
            var anchors = document.querySelectorAll("a");

            // lightning version - doesn't work as well
            var container = component.find("container").getElement();
            var anchors = container.childNodes;

            for(var i = 0; i < anchors.length; i++) {
                var anchor = anchors[i];
                $A.util.addClass(anchor, "custom-anchors");
                anchor.addEventListener("click", function(event) {
                    var href = this.getAttribute("href");
                    var urlEvent = $A.get("e.force:navigateToURL");
                        "url": href
        }), 1000);

Stumble upon this one, please share if you have any insights. Thanks for your time!

Looks like the anchors aren't available with - component.find("container").getElement().childNodes.length and I get error due to locker service as:

Exception: TypeError: Illegal invocation at HTMLCollection.remoteFunction

  • noticed a few thinkgs in your code, this resource might help you improve it--> Lightning Components Developer Guide Anchor Tag: <a> – glls Mar 26 '18 at 13:00
  • Thanks for your reply gminero, This was just an example, in real life the value would be fetched from a formula field. – Raul Mar 26 '18 at 13:36

With the help of my colleague, got a ridiculously easy solution. We don't have to those DOM manipulation techniques.

Instead use lightning:formattedRichText which opens all the anchors/links in value [formula field in my case] in standard way.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.