[SalesForce] Lightning components in Salesforce1: How to set focus to a particular component? Alternative solutions

I need to optimize a component for Salesforce One mobile experience.

Imagine a search form that contains several input fields and a button at the end. The form occupies entire screen.
When the search results are retrieved (on button press), they appear below the form and the user have to scroll down himself to see the results.

Question:

Upon results retrieval how to set the focus on the first result component so that the user wouldn't have to scroll down to see the results? Given that .getElementById('').focus() is not working due to Locker Service limitation.
If it's not possible technically, what can be an alternative solution?

tried and failed so far:

document.getElementById().focus(); //LockerService
component.find().getElement().focus(); //LockerService
window.location.hash = id; //doesn't work in salesforce one mobile
app
scrollTo aura event //is not supported in lightning
window.scrollTo(0, 500); // no effect in S1

Possible way to solution:

hack salesforce one scroller somehow (something similar to https://salesforce.stackexchange.com/a/83070/27814)

Example code:

<!--FORM occupying mobile screen-->
<div aura:id="formDiv">
    <c:Form />
</div>
<!--RESULT LIST appears below the form but the user's screen is still on the form -->
<div aura:id="resultDiv">
    <aura:iteration items="{!v.results}" var="result">
        <c:ResultListItem result="{!result}"/>
    </aura:iteration>
</div>

Best Answer

My current workaround is to hide the form and show a button to get the form back using $A.util.toggleClass(formDiv, "slds-hide");

The bottleneck of this is when the form is longer than the screen height - the users viewport lands below the point where the result list starts.

<div aura:id="formDiv">
    <c:Form />
</div>
<div aura:id="toggleFormButtonDiv" class="slds-hide">
    <lightning:button variant="base" onclick="{!c.toggleFormVisibility}"
                      label="Show Form"/>
</div>

toggleFormVisibility: function (component) {
    var formDiv = component.find("formDiv");
    var toggleFormButtonDiv = component.find("toggleFormButtonDiv");
    $A.util.toggleClass(formDiv, "slds-hide");
    $A.util.toggleClass(toggleFormButtonDiv, "slds-hide");
}

Looking for a better solution.

Related Solutions

[SalesForce] Lightning Components: handle event from one particular component

You can fire an application event from the Modal component(which you are doing now), which carries necessary data and a unique indentifier(might me workitem id) to identify a specific child component.

Also, passing the workitem object from the workItem Component would also work too but you have access it incorrectly in the modal component.

So do the following changes:

taskModalController.js

1.Access the workitem using event.getParam():

showTaskModal : function(component, event, helper) {

    var taskModal = component.find('task-modal');
    $A.util.removeClass(taskModal, "hide")
    var workItem = event.getParam('work'); // Now you'll get the workitem object
    console.log('event.getParam(work??)', workItem);
    component.set('v.work', workItem);
}

2.Add the workItem object/id to the AA_updateTaskEvent app event along with taskName.

saveTask: function(component, event, helper){
    var taskInput = component.find('task-input');
    var taskName = taskInput.get("v.value");
    var updateEvent = $A.get("e.c:AA_updateTaskEvent");

    updateEvent.setParams(
        {
            'taskName': taskName,
            'workItemId':component.get("v.work").Id
        }

    );

    updateEvent.fire();
    // other logics
},

3.Check if you need to add the task in workItem child.

workItemController.js

updateTask: function(component, event, helper){

    console.log('fired update task in work item-------------------');
    var taskName = event.getParam("taskName"); // Get the task name
    var workItemId = event.getParam("workItemId"); // Get the workitemid 
    var workItem = component.get("v.work");

    //if it turns out true, then we have got to the workitem component whose's task should be updated.
    if(workItem.Id == workItemId){
        var newTask = {agf__Subject__c: taskName};

        var workTasks = component.get("v.tasks");
        console.log("the work item-----", workTasks)

        workTasks.push(newTask);
        component.set("v.tasks", workTasks);
    }

    //all work items get pushed my new task since workItem.cmp
    //has a listener
}

To answer your other questions.

1) I have already answer it above.

2) In my opinion its better to keep the modal in the root rather than in the workItem which causes unnecessary DOM to be present. Honestly, I don't see anything complicate here.

3) Application events are best suited in places where components that aren't part of containment hierarchy need to communicate. Your discussion to keep the modal standalone(common to your app/component) and communicating with app event is a perfect example.