$A.createComponent not firing when loading component dynamically

Question

I have a parent custom component which loads child custom components dynamically to create a non linear interview/wizard process.

The child component has aura:valueInit method:

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

Which fires this method:

doInit : function(cmp, event, helper) {
    console.log("doInit");
    // do other stuff
},

The parent component uses this method to dynamically load the child:

injectComponent: function (cmp, name) {
    console.log('injectComponent');

    var target = cmp.find('main');

    $A.createComponent(name, {
        "aura:id" : "activeScreen",
        "model" :  this.model(cmp)
    }, function (contentComponent, status, error) {
        if (status === "SUCCESS") {
            console.log('injectComponent: SUCCESS');
            target.set('v.body', [contentComponent]);
        } else if (status === "INCOMPLETE") {
            console.log("No response from server or client is offline.")
        } else if (status === "ERROR") {
            console.log(error);
            throw new Error(error);
        }
    });
},

And injectComponent is called from here:

    Promise.all([savePromise]).then(function(values) {
        var next = self.getNextScreen(cmp, model);
        self.injectComponent(cmp, next);
    }); 

But when I call injectComponent it stalls, and the component does not render until I click somewhere on the screen.

Here is an example of the console log:

Notice the 10 second gap between injectComponent and doInit

Why is this happening?

Answer 1

I fixed it by adding $A.getCallback( after the .then

Promise.all([savePromise]).then($A.getCallback(function(values) {
    self.injectComponent(cmp, next);
})); 

For further info:

• Using JavaScript Promises
• Modifying Components Outside the Framework Lifecycle