[SalesForce] force:navigateToComponent not loading component in Summer ’17 | DOM repetition issue in Summer ’17

I'm using force:navigateToComponent to navigate to a different component on click.
On the first click, it navigates to the component and everything is successfully loaded.

When pressing back button and being navigated to the inner component again, the inner component is not being loaded, although, all the data is being loaded.
This issue started when the org became Summer '17. This issue is not present in Winter '17 org.
And, locker service is active.

Additional findings:-

DOM is being repeated everytime back button is pressed and then navigated to the component using force:navigateToComponent in Summer '17 org. Also, the latest (or the last DOM) is not the one that is displayed. It varies. Sometimes, second or the first DOM element is being displayed in the front end.

For example:-

Say there's a div with class "outer-wrapper" in the inner component(the one which is navigated to). So, in the first navigation, document.getElementsByClassName('outer-wrapper').length returns 1. When the back button is pressed and then navigating again to the inner component, document.getElementsByClassName('outer-wrapper').length becomes 2, 3 and maximum 4.
It is not just that Salesforce does not handle the old DOM element, but also, it is not the latest (or the last DOM element) which is being displayed in the front end.

This issue came to light in Summer '17 org. It is not present in Spring '17. [Eventhough DOM repetition is there, the last DOM element is the one which is displayed in the front end.]

It would be great if anyone could suggest a workaround or confirm if this is an issue in the Summer '17 org.

Best Answer

I've seen the back button caching before. You might checkout this post I had from a while back:

Navigation in Desktop Lightning Experience not Destroying Components

I'd be curious to see if the solution of unrender: component.destroy(); works.

Your other option is to manually navigate to between components using a wrapper component. Something like:

navigate: function(cmp, evt){
    var activeStep = cmp.get('v.activeStep');
    var nextStep = someCmpName;

    var self = this;

    $A.createComponents([
        [someCmpName, {params...}]
        ], function(newCmps, status, statusMessagesList){

        if(status === 'SUCCESS'){
            var contentCmp = cmp.find('content-container');

            contentCmp.set('v.body', newCmps );
        }else{
            console.log(status, statusMessagesList);
            //handle oops
        }
    });

},
Related Topic