1

Having an afterRender in a Lightning Component makes the Icon not show in Lightning Base Component <lightning:button />

Here is a quick Test App:

TestApp.app

<aura:application extends="force:slds" >
    <c:TestComponent />
</aura:application>

TestComponent.component

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
    <aura:attribute name="recordId" type="string" />

    <lightning:button type="button" variant="neutral" label="Download" title="Download" iconName="utility:download" iconPosition="left" onclick="{!c.clickMe}" />

</aura:component>

TestComponentRenderer.js

({
    afterRender: function(component, helper) {

    }
})

If we remove the afterRender function, the button icon only displays if I remove the afterRender function completely from renderer.js file.

4

I belive that is happening because you are overriding the afterRender method and you are not calling the superAfterRender method.

The following code will work fine.

TestComponentRenderer.js

afterRender: function (component, helper) {
    this.superAfterRender();
    // interact with the DOM here
}

This way you will be extending the default rendering functionality. Link

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.