e.force:createRecord not loading create screen - lightning Component

Question

I've created a LC to override the standard new button on a custom object. The component uses e.force:createRecord to load the createRecord screen for the object

All works fine when you use the component for the first time, but if then go to create another record when clicking the new button the record type selection appears, click ok and its a blank screen. The create record screen doesn't appear but the url changes to what it should be.

// *** Component 
    <aura:component implements="force:lightningQuickActionWithoutHeader,lightning:actionOverride,lightning:hasPageReference" >
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:attribute name="accId" type="string"/>
</aura:component>

// *** CONTROLLER  ****

({
    doInit : function(component, event, helper) {

            // Get the parent account ID from the URL 
        var pageRef = component.get("v.pageReference");
        var state = pageRef.state; // state holds any query params
        var base64Context = state.inContextOfRef;

        if (base64Context.startsWith("1\.")) {
            base64Context = base64Context.substring(2);
        }
        var addressableContext = JSON.parse(window.atob(base64Context));
        component.set("v.accId", addressableContext.attributes.recordId);
        var accId = component.get("v.accId");

        helper.handleShowCreateForm( component, accId );
    }

})

// *** HELPER ****

({
    handleShowCreateForm: function( component, accId ) {

        let helper = this;
        let pageRef = component.get( 'v.pageReference' );

        // Retrieve specific parameters from the URL.
        // For case-insensitivity, the properties are lowercase.
        let urlParamMap = {
            'objectname' : "TR1__Job__c",                                                                                // object whose create form to display
                        'recordtypeid' : component.get("v.pageReference").state.recordTypeId,    // record type for new record
            'recordid' :  accId                                                                                                      // id of record where button was clicked
        };

        for(let key in pageRef.state ) {
            let lowerKey = key.toLowerCase();
            if(urlParamMap.hasOwnProperty(lowerKey)) {
                urlParamMap[lowerKey] = pageRef.state[key];
            }
        }

        console.log( 'urlParamMap', urlParamMap );

        Promise.resolve()
            .then( function() {
                if ( !$A.util.isEmpty( urlParamMap.recordid ) ) {
                    // workaround for not being able to customize the cancel
                    // behavior of the force:createRecord event. instead of
                    // the user seeing a blank page, instead load in the background
                    // the very record the user is viewing so when they click cancel
                    // they are still on the same record.
                    helper.navigateToUrl( '/' + urlParamMap.recordid );
                    // give the page some time to load the new url
                    // otherwise we end up firing the show create form
                    // event too early and the page navigation happens
                    // afterward, causing the quick action modal to disappear.
                    return new Promise( function( resolve, reject ) {
                        setTimeout( resolve, 1000 );
                    });
                }
            })
            .then( function() {
                helper.showCreateForm( component, urlParamMap, pageRef );
            });

    },

    showCreateForm: function(component, urlParamMap) {

      var windowRedirect = window.location.href;  
      var createRecordEvent = $A.get("e.force:createRecord");
      createRecordEvent.setParams({
        "entityApiName": "TR1__Job__c",
         "recordTypeId": urlParamMap.recordtypeid,
         "defaultFieldValues": {
            'TR1__Account__c' : urlParamMap.recordid,
          } 
      });
        createRecordEvent.fire();
    },

    navigateToUrl: function(url) {

        console.log('navigating to url', url);

        if(!$A.util.isEmpty(url)) {
            $A.get('e.force:navigateToURL').setParams({'url': url }).fire();
        }
    },

    logActionErrors : function( errors ) {
        if (errors) {
            if (errors.length > 0) {
                for (let i = 0; i < errors.length; i++) {
                    console.error( 'Error: ' + errors[i].message);
                }
            } else {
                console.error('Error: ' + errors);
            }
        } else {
            console.error('Unknown error');
        }
    }
})

Answer 1

You can Try using change handler on pagerefrence variable and re initializing the component like this

<aura:handler name="change" value="{!v.pageReference}" action="{!c.doInit}"/>