SAPUI5 Set Focus on Input Field

Question

i have the following Problem:

I have 2 XML Views with a few input fields and at navigation to the second view the focus should be on the 5th(ID = "RueckmeldeNr") field.

I tried several things but nothing worked.. If i use the jQuery delayedCall the focus shortly flashes on the input field but is instantly set to the NavBack Button in the upper left corner.
Do i use the method false or forget something? How can i solve this?

onAfterRendering : function(oEvent) {
oInputRueck = this.getView().byId("RueckmeldeNr");
//  this.getView().byId("RueckmeldeNr").focus();
//  this.getView().byId("RueckmeldeNr").$().focus();
//  jQuery.sap.delayedCall(200, this, function() {
//      //this.getView().byId("RueckmeldeNr").focus();
//      oInputRueck.focus();
//   });
//  var oFocusInfo = this.getView().byId("RueckmeldeNr").getFocusInfo()
//  this.getView().byId("RueckmeldeNr").applyFocusInfo(oFocusInfo);
    jQuery.sap.delayedCall(0, this, function() {
        oInputRueck.focus();
    });
},

I hope you can help me!
Thank you

score 6 · Accepted Answer · answered Oct 16 '15 at 11:32

6

Just a suggestion:

You could set focus to the required field in the view (or where ever you define it).

For example, in view1 you define:

var oInput = new sap.m.Input({id: "inputID"})
.addEventDelegate({
    onAfterRendering: function(){
        oInput.focus();
    }
});

and then, when you call the view, the focus should be set to the required field automatically.

Here is a working JSBIN example: LINK

answered Oct 16 '15 at 11:32

keshet

1,716
5
27
54

1

This works great when there is no navigation involved. When there is, however, the first focusable control would be focused instead when the user navigates back, because usually the **controls do not rerender on back-navigation**. A documented solution is to [make use of navigation related events such as `afterShow`](https://stackoverflow.com/a/48559689/5846045). – Boghyon Hoffmann Aug 17 '21 at 12:27

score 3 · Answer 2 · answered Oct 16 '15 at 11:03

3

Answer is solved by myself.

I just put the delayedCall on 500 miliseconds and it worked.

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

answered Oct 16 '15 at 11:03

Daeron

101
1
1
8

4

It works but `delayedCall` / `setTimeout` with ms higher than `0` [should be avoided.](https://ui5.sap.com/#/topic/030fcd14963048218488048f407f8f34.html#loio030fcd14963048218488048f407f8f34__11) Instead, make use of appropriate events such as [`afterShow`](https://ui5.sap.com/#/api/sap.m.NavContainerChild/events/AfterShow), [`afterOpen`](https://ui5.sap.com/#/api/sap.m.Dialog/events/afterOpen), `after*`, ... depending on which control is used as a container. – Boghyon Hoffmann Jan 28 '18 at 21:13
I tried this in desperation, and although it sort of works, it's a hack. Eventually I fixed this properly by setting autoFocus = false on my sap.m.App container. Credit to @schnoedel for this answer: https://stackoverflow.com/a/36390429/1499294 – Daz Jun 19 '20 at 09:55

SAPUI5 Set Focus on Input Field

2 Answers2

Linked