Bug in Lightning Button Base Component with `afterRender` in Spring 17

Question

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.

Answer 1

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