Lightning Component initialization after redirect

Question

A Lightning Component is exposed in a Lightning Tab via Salesforce1 Mobile. This component provides a form to "create" new records. Actually, it creates a record with default values, saves it, then presents it to the user in a force:recordEdit form. If the user cancels, the component deletes the record and returns to the wizard form. If the user saves, it updates the record via the force:recordSave event and redirects to the that record's detail page on the force:recordSaveSuccess event.

This all works great, but when I return to the wizard to start a new deal, it fails to initialize. It doesn't even reach my code, so I don't know why this fails. The only way I can restore the component is to completely refresh the page in a mobile browser (which is obviously not possible in the Salesforce1 Mobile App). Does anyone have any thoughts?

Component.cmp

<aura:component controller="..." implements="force:appHostable,flexipage:availableForAllPageTypes" access="public">

  <!-- Attributes -->

  <!-- Events -->
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"></aura:handler>
  <aura:registerEvent name="saveSuccess" type="force:recordSaveSuccess"></aura:registerEvent>
  <aura:handler name="onSaveSuccess" event="force:recordSaveSuccess" action="{!c.onSaveSuccess}" description="On successful save, open new record detail page."></aura:handler>

  <!-- MARKUP -->
  <div class="slds">

    <!-- CONFIG FORM -->
    <div aura:id="theConfigForm">

      <!-- SELECT OPPORTUNITY / ACCOUNT -->
      <force:inputField aura:id="opportunityLookup" value="{!v.lookup.Opportunity__c}"></force:inputField>
      <force:inputField aura:id="accountLookup" value="{!v.lookup.Account__c}"></force:inputField>
      <!-- / SELECT OPPORTUNITY / ACCOUNT -->

      <!-- SELECT OBJECT -->
      <ui:inputSelect class="slds-select dynamic" aura:id="objectTypeInputSelect" change="{!c.onObjectTypeChange}"/>
      <!-- / SELECT OBJECT -->

      <!-- SELECT RECORD TYPE -->
       <ui:inputSelect class="slds-select dynamic" aura:id="recordTypeInputSelect" change="{!c.onRecordTypeChange}">
         <ui:inputSelectOption text="--None--" label="--None--" value="true" disabled="true"/>
        <aura:iteration items="{!v.recordTypes}" var="recordType">
        <ui:inputSelectOption text="{!recordType.Id}" label="{!recordType.Name}"/>
        </aura:iteration>
       </ui:inputSelect>
      <!-- / SELECT RECORD TYPE -->

      <!-- CREATE RECORD -->
      <ui:button label="Create Deal" class="slds-button slds-button--neutral slds-button--small slds-button--brand" press="{!c.createDeal}"></ui:button>
      <!-- / CREATE RECORD -->

    </div>
    <!-- / CONFIG FORM -->

    <!-- EDIT FORM -->
    <div aura:id="theEditForm" class="slds-hide">
      <ui:button label="Cancel" press="{!c.deleteDeal}"></ui:button>
      <ui:button label="Save" press="{!c.saveDeal}"></ui:button>
      <force:recordEdit aura:id="edit" recordId="{!v.recordId}"/>
    </div>
    <!-- / EDIT FORM -->

  </div>
  <!-- / MARKUP -->

</aura:component>

Controller.js

({
    doInit : function(cmp, evt, hlp) {
        console.log('in c.doInit');
        cmp.set('v.recordId', '');
        hlp.setObjectTypes(cmp);
        hlp.setRecordTypes(cmp, hlp);
    },
    saveDeal : function(cmp) {
        console.log('in c.saveDeal');
        cmp.find("edit").get("e.recordSave").fire();
    },
    onSaveSuccess : function(cmp) {
        console.log('in c.onSaveSuccess');
        var recordId = cmp.get('v.recordId');
        cmp.set('v.recordId','');
        $A.get("e.force:navigateToURL").setParams({
            "url": "/" + recordId,
            isredirect: true
        }).fire();
    }
})

Console Log

# user saves record
in c.saveDeal

# save is successful, so redirect to record detail page
in c.onSaveSuccess
ltng:unrender 5:1;0

# SF1 opens record detail page
WARNING: Access Check Failed! AttributeSet.get(): attribute 'class' of component 'markup://forceChatter:recordFeedContainerMobile {486:c}' is not visible to 'markup://forceChatter:recordFeedContainerMobile {486:c}'.
WARNING: Access Check Failed! AttributeSet.get(): attribute 'class' of component 'markup://force:highlightsStencil {3:1057;a}' is not visible to 'markup://force:highlightsStencil {3:1057;a}'.
WARNING: Performance degradation: Multiple items were set in iteration[id:5:1113;a]in the same Aura cycle.
WARNING: Performance degradation: Multiple items were set in iteration[id:5:1113;a]in the same Aura cycle.

# User attempts to open lightning component via lightning tab
WARNING: Action failed: ltng$locker$controller$createComponent
WARNING: Action failed: one$auraContainer$controller$init
WARNING: components.createComponent(): client-side component creation failed
WARNING: Access Check Failed! AttributeSet.get(): attribute 'active' of component 'markup://one:content {545:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
WARNING: Access Check Failed! AttributeSet.set(): 'active' of component 'markup://one:content {545:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
WARNING: Access Check Failed! AttributeSet.get(): attribute 'loggingContext' of component 'markup://one:actionCardPhone {27:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.
WARNING: Access Check Failed! Component.getEvent():'activated' of component 'markup://one:actionCardPhone {27:c}' is not visible to 'markup://c:CPQ_SSG_CreateDeal {280:1;0}'.

Answer 1

After months of deliberation with Salesforce R&D, we have a workaround.

The error occurs when a force:inputField component is not the immediate child of the aura:component definition tag. Anytime this component is used inside other HTML tags, it will produce the error I've reported.

The problem stems from a deeper issue in the force:inputField component, which Salesforce will fix in their next release (Winter '17). However, they have provided a temporary solution that works for us.

Add a force:outputField component as an immediate child of the aura:component definition with a reference to the same data point as the force:inputField component. By doing this, the force:inputField component will render properly and allow initialization after redirects.

<aura:component controller="..." implements="...">

  <!-- Attributes -->
  <aura:attribute name="account" type="Account" default="{'sobjectType':'Account'}"></aura:attribute>

  <!-- Output Field Workaround -->
  <force:outputField aura:id="accountLookupOutput" value="{!v.record.Account__c}" class="slds-hide"></force:outputField>

  <!-- Markup -->
  <div class="slds">
    <force:inputField aura:id="accountLookup" value="{!v.record.Account__c}"></force:inputField>
  </div>

</aura:component>

Answer 2

I faced the issue of a lookup relationship not rendering when my force:inputField was inside a lightning tag (lightning:tab in my case). I was able to get around this by placing a div placeholder where I wanted my force:inputField to be and then placing the force:inputField inside another div outside of the lightning tags (at the bottom of the page works) and used jQuery to move it into the first div which was inside the lightning:tab.

// add the following div where you want the force:inputField to eventually display

<div id="salesforceUserToMirrorHolder"/>

// add the following div outside of any lightning tags (near the bottom of the page works

<div id="salesforceUserToMirrorRendered" style="display:none;">
   <force:inputField aura:id="salesforceUserToMirror" value="{!v.item.Salesforce_User_to_Mirror__c}"/>
</div>

// use jQuery (or native JavaScript) to move the element to the div1 location.

 $("#salesforceUserToMirrorRendered").appendTo("#salesforceUserToMirrorHolder");
$("#salesforceUserToMirrorRendered").show();