Change the focus after navTo()

[Former Member]

Hello everyone,

Here is my scenario:

In order to fill up the Multi Input field, I need to click on the right arrow button to select some items(the click event on the arrow button causes a navigation).

My goal is to move the focus from the Multi Input field to the right arrow button after I navigate to this view again, because I don't want to have the 2-rows initially displayed in the Multi Input field.(This means, it allows 2-rows to be shown, when I click on this Input field. But that 2-rows-effect should not be shown initially after page is loaded or after the navigation). The property enableMultiLineMode="true" of the Multi Input control need to be kept.

My codes are written in the onInit(). The problem is, this method is executed only once. After using the navigation from another view, the focus, as above described, will come again in the Multi Input field.

// Controller of homepage
onInit : function(){
    sap.ui.core.UIComponent.getRouterFor(this).getRoute("Route_Name").attachPatternMatched(this._onObjectMatched, this);
},

_onObjectMatched : function(){
    jQuery.sap.delayedCall(0, this, function() {
      this.byId("ID of the right-arrow-button").focus()
    });
}

Any ideas?

Thanks very much!

Best Regards,

Vincent

[former_member327542]

Are you getting the reference of the arrow control with this.byId("ID of the right-arrow-button")

It should be this.getView().byId("ID of the right-arrow-button").focus(); or

sap.ui.getCore().byId("ID of the right-arrow-button").focus()

[Former Member]

Hello viswateja,

have just tried your suggestions. With

this.getView().byId("ID of the right-arrow-button").focus();

I got the same problem after the execution.

With

sap.ui.getCore().byId("ID of the right-arrow-button").focus()

I even loss my focus after loading the page at the first time.

[Former Member]

any further suggestions? I'm sill looking for a solution. Thanks

[Former Member]

Hi Vincent,

onInit method will be executed only once, when the view is loaded for the very first time. So, if you want to do something (put focus on right arrow in your case) at each navigation to the view, then you should use the attachPatternMatched event of your corresponding route as below:

onInit : function(){
    this.getOwnerComponent().getRouter().getRoute("<ROUTE_NAME>").attachPatternMatched(this._onObjectMatched, this);
},

_onObjectMatched : function(){
    jQuery.sap.delayedCall(0, this, function() {
      this.byId("ID of the right-arrow-button").focus()
    });
}

Here the function _onObjectMatched will be triggered at each navigation to the view.

[Former Member]

Hello rkgupta94 ,

thanks for your reply. I have also tried this method, but the focus on my multi input control is still there after the navigation moves to the current view.