Pagescroll not working in Pages which are navigated to a lightning component in Salesforce1 app

Question

I am facing an issue with the normal pagescroll in the lightning component in Summer'16.

The scroll is not working in pages which are navigated to a lightning component in the Salesforce 1 app.

Pagescroll is working for a page developed using app builder. But as per Salesforce https://success.salesforce.com/issues_view?id=a1p3A0000017yktQAA it's said that it has been fixed. But still, i am facing the issue.

Here's the example code

First Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> 
  <!-- Optional coponent attributes here -->
  <!-- Optional HTML markup -->
  <div class="container">
    <button onclick="{!c.gotoCompTwo}" class="slds-button"> Go to Component 2 
    </button>
  </div>
</aura:component>

First component's Controller

gotoProductForecast : function(component, event) {

        var navigateEvent = $A.get("e.force:navigateToComponent");

        navigateEvent.setParams({
            componentDef: "c:Component2",
            componentAttributes: {
                //Set attributes if any
            }
        });
        navigateEvent.fire();
}

Second component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">

  <!-- Optional coponent attributes here -->

  <!-- Optional HTML markup -->

  <div class="container">
  //Required contents (Say, the content exceeds more than the vertical screen size)
  <!-- Other components -->
  </div>
</aura:component>

The native pagescroll works in the 1st component.

But after clicking the button, when it navigates to the second component, the pagescroll doesn't work even if the content exceeds the screen size. (I am not even able to swipe the page down to refresh the page!)

It would be very helpful if someone could could provide any insights on this.

Answer 1

An equivalent to force:navigateToComponent will be released GA as a public API, it's under the category of "Global Components" that is scheduled for this coming release "Winter 17":

http://web-auth.salesforce.com/campaigns/lightning/index.jsp#Roadmap

We appear to be on track to release "Global Components" around 25 lightning components, interfaces, and events, and lightning:navigateToComponent will be one of them. All of these are SLDS enabled, which is the main goal.

Our roll-out of the Winter releases usually begins in August and goes in stages all the way thought September. We don't have the public blog post yet, but this is a link to last year's Winter 16:

https://www.salesforce.com/blog/2015/08/salesforce-winter-16-coming-soon.html

The dates will most likely be similar. Please understand that I am composing from various sources, and that you should wait for the formal announcements before making a final decision (Safe Harbor rules). I understand your issues, and I wished I had a better answer, but I hope that this can still help you strategize your development process.

Answer 2

As of today the method $A.get("e.force:navigateToComponent") is not yet available in the docs. It could be leading to wrong rendering of pages or maybe it has some other unexpected behaviors...

A possible workaround, depending on your use-case is to dynamically create the component, instead of navigating to it.

Answer 3

The force:navigateToComponent is replaced by lightning:navigation in Summer '18 release. Here is how you would implement it:

The first component must include lightning:navigation component with a unique aura:id in the markup. It doesn't have any UI attached to it, so it's safe to add it anywhere in the component.

First Component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes"> 
  <!-- Optional coponent attributes here -->
  <!-- Optional HTML markup -->
  <lightning:navigation aura:id="navService"/>
  <div class="container">
    <button onclick="{!c.gotoCompTwo}" class="slds-button"> Go to Component 2 
    </button>
  </div>
</aura:component>

In the controller you need to build the pageReference JavaScript object which will construct the URL for the destination Lightning component. Here is how you build it.

First Component's Controller

gotoCompTwo : function(component, event) {

    var nav = component.find("navService");
    var pageReference = {
        "type": "standard__component",
        "attributes": {
            "componentName": "c__Component2"
        }, 
        "state": {
            //Other optional attributes
            //e.g. "recordId" :  sampleRecordId
        }
    };  
    nav.navigate(pageReference);
}

The second component which is where you want to navigate to must implement lightning:isUrlAddressable interface.

Second Component

<aura:component implements="lightning:isUrlAddressable" >

    <!-- Optional coponent attributes here -->
    <!-- Optional HTML markup -->

</aura:component>