22

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.

  • Going to be tough to help you without a reproducible example – Eric Jun 15 '17 at 6:43
0

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

},
  • Follow up thoughts: You'd also need to listen for 'hashchange' event, which would probably mean subscribing to the aura:locationChange event and navigating backwards from that. Which give me another idea. If the unrender cmp.destory() doesn't work. You may be able to just listen for a locationChange and clean up old components there too. – wellmstein Jun 15 '17 at 17:26
0

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.

-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);
  • I did not vote this answer up or down, but the likely reason for such votes is it contains code with no explanation of why it might solve the issue. If you include such explanation, you may find your answers better received. – Adrian Larson Oct 1 '18 at 22:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.