Skip to Content
0

Change the focus after navTo()

Oct 11, 2017 at 01:59 PM

73

avatar image
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

temp.png (2.6 kB)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

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

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

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Oct 14, 2017 at 06:31 PM
0

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

Show 1 Share
10 |10000 characters needed characters left characters exceeded
Former Member

Hello Former Member,

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.

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

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.

Show 1 Share
10 |10000 characters needed characters left 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.

0