[SalesForce] Salesforce Lightning afterRender method throws an error after refresh

I have a main component, which contains two more components. They render instead of each other dynamically, using $A.createComponent(), depending on user actions. Both of these components have <ui:inputDate> elements.

First time the component is loaded, everything is fine, but as soon as I refresh the component I have an error message with the following text:

afterRender threw an error in 'markup://ui:inputDate' : Cannot set
property 'value' of null

Still, after closing the error message, component works fine, as if there is no error at all.

Did someone face such issue or have any suggestions on how to fix it?

Best Answer

I found solution to this issue, so I'll post it in case someone would face the same trouble.

The explanation lies in fact that lightning starts the unrender() method when you refresh the component, and removes all DOM from component. Right after that afterRender() method starts, which, as far as I know, should check whether all component elements are rendered. As the unrender() removed all elements, afterRender() can't find them and throws an error.

The solution was to rewrite afterRender() so it won't start if date inputs are not rendered, I used jQuery for this purpose and method looks like:

Related Solutions

[SalesForce] Did Salesforce recently update their aura library? Facing weird issues with access control and string concatenation

Known issue with custom rerender methods - fix is in progress and currently targeted for Winter'17 .12 patch early next week. If you deactivate Locker service until the fix comes out this problem should go away. This issue is being tracked by bug W-3434017 if you want to reference that in any cases or discussion with support.

I do not know about the unexpected token issue.

[SalesForce] aura:outputDate with value from aura:iteration does not work!

A ui:outputDate component represents a date output in the YYYY-MM-DD format.use a desire format you can get it

In helper

({
    reloadYear: function(component, helper) {
        var year = component.get("v.year");
        var mList = [];
        var nList =[];
        for(var m = 0; m < 12; m++) {
        mList.push(new Date(year, m, 1, 0, 0, 0, 0));
        }
        for(var i=0;i<mList.length;i++){
           nList.push((mList[i].getFullYear() + "-" + (mList[i].getMonth() + 1) + "-" + mList[i].getDate()));
        }
        component.set("v.monthList", nList);
    },
})

In component

 <aura:iteration items="{!v.monthList}" var="mo">
        <ui:outputDate value="{!mo}"/>
    </aura:iteration>

Best Answer

Related Solutions

[SalesForce] Did Salesforce recently update their aura library? Facing weird issues with access control and string concatenation

[SalesForce] aura:outputDate with value from aura:iteration does not work!

Related Topic