Salesforce1 on focus scroll to the top

Question

I've this issue using Salesforce1 on mobiles (Android and IOS) with a long lightning component form: Tapping on an input text element at the bottom part of the form, scrolls the screen to the top. After the editing of the form element I'm not able to scroll again to the top and forcing it fires the overscroll, refresh the all page and losting all inserted data.

To reproduce: lightning component form

<aura:component implements="force:appHostable">
<ltng:require styles="/resource/SLDS0120/assets/styles/salesforce-lightning-design-system.min.css"/>    

<p>TEST PAGE START</p>

<div class="slds-form--stacked">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="slds-form-element">
        <label class="slds-form-element__label form-element__label--small" for="inputSampleSmall">Input Label</label>
        <div class="slds-form-element__control">
            <input id="inputSampleSmall" class="slds-input slds-input--small" placeholder="placeholder" type="text"  />
        </div>
    </div>
    <p>TEST PAGE END</p>
</div>

1 - After tapped on the imput text field, the focus is in it but the screen scroll to the top when mobile keyboard is showed into the screen.

2 - Starting writing, force the screen back to the imput text field; You can see what you are writing.

3 - After wrote, mobile keyboard is hidden and you see screen in the correct position.

4 - If you try to scroll to the top you cant as the top limit is noe set to the actual screen position (much below the real top) and forcing the scroll fires the overscrolling and refresh the all page, losing all data set.

Have someone the same issue??

Thanks!

Answer 1

Here is a workaround, not a solution.

Wrap the inputTextArea element in a div. Wrap the other elements in the component in another div. On the focus event of the inputTextArea element, hide the div which contains all the other elements. On another event, perhaps the blur event of the inputTextArea or the click event of a button, show the div which was hidden during the focus event.

This workaround puts the textarea at the top of the screen while the contents of the textarea are being edited. When the subsequent click event is fired, the textarea returns to its position below the other elements on the screen.

Component

<aura:component controller="theApexController" >
    <div aura:id="theTopDiv" >
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />  
    </div>    
    <div aura:id="theNotesDiv" >
        <ui:inputTextArea                                
            placeholder="Placeholder Text" 
            value="{!v.theView.Notes__c}" 
            focus="{!c.focusNotes}" 
        />
        <div aura:id="theButtonsDiv" class="dontShow">         
            <button onclick="{!c.cancelNotes}">Cancel</button>     
            <button onclick="{!c.saveNotes}">Save</button>                
        </div>                
    </div>       
</aura:component>

Controller

({
    focusNotes : function(component, event, helper) {
        // Call the helper function to hide the top div
        helper.helpShowEditNotes(component, event, helper);
    }   
    ,cancelNotes : function(component, event, helper) { 
        // Hide the buttons and show the top div
        helper.helpHideEditNotes(component, event);         
    }
    ,saveNotes : function(component, event, helper){
        // Hide the buttons and show the top div
        helper.helpHideEditNotes(component, event);     
        // Call the Apex controller to save the changes
        // ...
    }
})

Helper

({
    helpShowEditNotes : function (component){        
        var topDiv = component.find("theTopDiv");
        var notesDiv = component.find("theNotesDiv");
        var buttonsDiv = component.find("theButtonsDiv");
        // Comment out the nextline to see the behavior of the app 
        // when the top div isn't hidden after the focus event
        // of the textarea is fired
        $A.util.addClass(topDiv, "dontShow");
        $A.util.removeClass(buttonsDiv, "dontShow");
    }        
    ,helpHideEditNotes : function (component){        
        var topDiv = component.find("theTopDiv");
        var notesDiv = component.find("theNotesDiv");
        var buttonsDiv = component.find("theButtonsDiv");            
        $A.util.removeClass(topDiv, "dontShow");
        $A.util.addClass(buttonsDiv, "dontShow");
    }          
})

Style

/* No space for top-level elements */
.THIS.dontShow {
    display: none;
}    
/* Single space for nested elements */
.THIS .dontShow {
    display: none;
}

Answer 2

I found a solution it was to add some media queries and to avoid plagiarism I will provide a link:

https://bitbucket.org/snippets/appirioux/nyyek (Solution)

The problem is that iOS Safari handles iFrames a bit differently than most browsers. It is unable to detect the height of content that is outside of the viewport when the page loads.

Since the height of the html, and body tags are only the size of the viewport, anything beyond that, even though it's viewable, will force the page to scroll back to the top when anything is selected. The reason for that is because the item (button, form field) isn't actually being clicked.

Answer 3

After encountering the same issue, I found the solution offered by Givko to be the best option, at least for me. https://bitbucket.org/snippets/appirioux/nyyek.

However, it did make the scrolling behavior on the iPhone and iPad awkward. It would immediately stop scrolling which is not the normal behavior people are used to on their phones. To make the scrolling act more nature, add this line to the html body tag:

-webkit-overflow-scrolling: touch;

Basically you're telling iOs to use the normal "lazy" scrolling where the screen doesn't stop scrolling immediately. In the end, your html and html body css will look like this:

html {
    position: fixed;
    overflow: auto;
    width: 100%;
    height: 100%;
}
html body {
    position: fixed;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    width: 100%;
}