Focus handling in SAPUI5

Question

We have a requirement that of using a "tab" key in the table control to navigation across only input fields.
1. Every table row has atleast 6 to 8 fields - 2 of them are input fields and rest could be text,select etc.
2. By clicking tab i navigate across input fields in a row on clicking the last input field of a row i should move to the first input field of the next row.
I have the code for the following but i can see the focus method of the input control focuses the UI to subsequent input field of the input to be focused.
Jsbin - https://jsbin.com/lugesecuhe/edit?html,output
I tried to set styles like .sapMFocus and also document.getElementbyId().focus and they dont work either.
Can you suggest some pointers on this. Thanks and Regards, Veera

Answer 1

I have exactly the same problem and started looking into it. I found out that the navigation within the table is possible and performed by class sap.ui.core.delegate.ItemNavigation (at least in v1.26).

However, what I consider really non-intuitive:

1. On Mac (Chrome or Safari) you have to hold the ALT key while pressing TAB to cycle through the input fields of your table.
2. I haven't figured out how to do it on Windows

I checked in your JSBin example, somehow the fields get focused in a weird order. I have prepared my own example - http://jsfiddle.net/bgerth/x8h92mz8 - where you can cycle through the input fields row by row using Alt+Tab.

---

Update 1

I have found the blog SAPUI5 Table Navigation with Tab Key by Klaus Kronawetter which adds extra keyboard handling to a sap.ui.table.Table. I adapted his code for a sap.m.Table which you can find at http://jsfiddle.net/bgerth/os6r096y.

Update 2

After further investigation, I decided that the solution from update 1 above is too much hassle.

Instead, I adapted the class sap.ui.core.delegate.ItemNavigationmentioned above, which is internally employed by sap.m.ListBase. In essence, you can cycle through the input fields with up and down arrow keys.

I have prepared an example at http://jsfiddle.net/bgerth/0r9L30wd. The relevant code is

var fnPatchedItemNavigationsetItemDomRefs = sap.ui.core.delegate.ItemNavigation.prototype.setItemDomRefs;
sap.ui.core.delegate.ItemNavigation.prototype.setItemDomRefs = function setItemDomRefsPatched(aItemDomRefs) {
    // 'this' is now the instance of sap.ui.core.delegate.ItemNavigation
    jQuery.sap.log.debug("Patched version of sap.ui.core.delegate.ItemNavigation.setItemDomRefs");
    var aInputFields = $(aItemDomRefs).find("input:enabled").get();
    if (aInputFields[0]) {
        // There is at least one enabled input field in this table
        fnPatchedItemNavigationsetItemDomRefs.call(this, aInputFields);
    } else {
        fnPatchedItemNavigationsetItemDomRefs.call(this, aItemDomRefs);
    }
}