How to Focus on Input Field after Navigation

Question

How to focus on input field after navigating back from a child page?

Child Page

onNavigateBtnClick: function() {
    var oHistory = History.getInstance();
    var sPreviousHash = oHistory.getPreviousHash();
    if (sPreviousHash !== undefined) {
        history.go(-1);
    } else {
        var bReplace = true;
        this.getRouter().navTo("HomePage", {}, bReplace);
    }
},

Parent Page

onAfterRendering: function() {
    jQuery.sap.delayedCall(500, this, function() {
        this.getView().byId("InputField").focus();
    });
},

Problem

1. When the nav back button is clicked first time, the onAfterRendering hook is called.
2. If I do some action on child page then click on the nav back button, the onAfterRendering method would not be called.

Answer 1

Three steps to solve this:

Update your <App> tag of the view to have autoFocus="false". This will prevent UI5 from autofocusing the first input of the view.

In your controller's onInit, attach a method to the route that will fire when the view is navigated to, like this:

onInit: function(){
    var router = sap.ui.core.UIComponent.getRouterFor(this);

    router.getRoute("routeTargetName").attachPatternMatched(this.onNavTo, this);
}

Declare the onNavTo method in your controller that will set the focus of your input:

onNavTo: function(route){
    this.byId("MyInputField").focus();
}

Now whenever you use your router to navTo("routeTargetName"), the onNavTo method will fire, which will set focus on the field.