Skip to Content
avatar image
Former Member

Change the focus after navTo()

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

temp.png (2.6 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • avatar image
    Former Member
    Oct 14, 2017 at 11:02 AM

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

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 14, 2017 at 06:31 PM

    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()

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hello viswateja Talupula,

      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.

  • avatar image
    Former Member
    Oct 12, 2017 at 05:39 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      Hello Former Member ,

      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.