Unable to set value to the component attribute after switching between lightning tabs ( Aura life cycle issue )

Question

I have a sample lightning component used in a lightning tab, which gets the file name from input type "file" and displays the name beside the input element.

fileupload.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="filename" type="String" default="" access="global"/>
    <div class="slds-modal__content slds-p-around--medium">
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <span class="slds-form-element__label" id="file-selector-id">Accepts .png &amp; .jpg images </span>
                <div class="slds-file-selector slds-file-selector--files">
                    <div class="slds-file-selector__dropzone">
                        <input aura:id="profilePic" type="file" class="slds-file-selector__input slds-assistive-text" accept="image/*" id="file-upload-input-01" aria-describedby="file-selector-id" onchange="{!c.getFileName}"/>
                        <label class="slds-file-selector__body" for="file-upload-input-01">
                            <span class="slds-file-selector__button slds-button slds-button--neutral">
                                <lightning:icon iconName="utility:upload" size="x-small" alternativeText="Upload Picture"/>
                                &nbsp; Browse Images</span>
                            <span class="slds-file-selector__text slds-medium-show">{!v.filename}</span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aura:component>

fileuploadcontroller.js

({
    getFileName : function(component, event, helper) {
        var fileInput = component.find("profilePic").getElement();
        var file = fileInput.files[0];
        console.log('File from Component Before : '+component.get("v.filename"));
        console.log('File Name : '+file.name);
        component.set("v.filename",file.name);
        console.log('File from Component After : '+component.get("v.filename"));
    }
})

• During the first visit or when we reload the page, the file upload functionality works fine.
• When we upload an image called step1.png, the behaviour as follows

• The logs indicate the before and after context changes to the component values. And we are able to see the step1.png value updated to the DOM as well.

Issue :

• When we switch between the lightning tabs , ie when we navigate to any standard tab and revisit the lightning component tab. the issue occurs

• The logs indicate the component value being updated from old file (step1.png) to new file (flower.png)
• However the updated component values are not reflecting in the screen (No DOM Update ).

Troubleshooting :

I was suspecting if the execution was going outside the component life cycle when switching tabs. Hence tried using $A.getCallback(), but it did not make any difference. And the critical update "Locker Service Security" makes no difference as well. This behavior is seen irrespective of locker service.

Am i missing something here ? Why am i not able to see the component value update on the DOM.

Answer 1

Since the component definitions that are cached are not clear/destroyed upon Navigation to different tabs in LEX, seems to cause this issue. But as a workaround you can destroy the component yourself when navigation happens. Check this answer out, it will solve your issue.