force:navigateToComponent not loading component in Summer '17 | DOM repetition issue in Summer '17

Question

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.

Answer 1

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
        }
    });

},

Answer 2

Even I faced this issue.

It seems the Locker Service is getting strict after every release.

Here you are getting multiple instance of a particular class by using JavaScript, it's because the whenever the component is loaded in the memory DOM elements will be created and as per your logic the control goes back and forth between the two components resulting in generating of multiple DOM elements.

I would suggest to use Global ID or Aura ID instead of using class name to find out the DOM element using JavaScript.

This will definitely help you out.

Answer 3

use the below component--https://developer.salesforce.com/docs/component-library/bundle/lightning:navigation/documentation

<lightning:navigation aura:id="navService"/>
 var navService = component.find("navService");
// Uses the pageReference definition in the init handler        
                    var pageReference = {
                        type: "standard__component",
                        attributes: {
                            componentName: "Your Component Name",
                        },state: {
                            c__recordName: Any attribute which you want to pass,
                            c__sc : Any attribute which you want to pass
                        } 
                    };
                    event.preventDefault();
                    navService.navigate(pageReference);

Write the below code in init of the component to which you want to navigate

var pageReference = component.get("v.pageReference");
        var recordId =(pageReference.state.c__sc);
        var recordName = (pageReference.state.c__recordName);
        console.log('recordId'+recordId+'recordName'+recordName);