I have a SAPUI5 table which contains input fields. I have prepared an example at http://jsfiddle.net/bgerth/x8h92mz8/.
When you press ALT+TAB you can cycle through the input fields within the table (I only found that out by looking at sap.m.ListBase.prototype._startItemNavigation
).
Only pressing TAB focuses the first element outside the table.
I consider that rather non-intuitive. Is there a way to make TAB alone work the same way?
Update:
Alt+Tab works in Chrome and Safari, but not Firefox (45.0.2) on my Mac. It doesn't work at all on Windows, as that combination is reserved to toggle through open application windows.
There are two solutions I discovered so far to address this problem
Proposal 1: Adapt tab key handling
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.
Unfortunately, the code is rather lenghty.
Proposal 2: Enable up/down arrow keys
After further investigation, I decided that the solution from proposal 1 above is too much hassle.
Instead, I adapted the class sap.ui.core.delegate.ItemNavigation
mentioned 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
return fnPatchedItemNavigationsetItemDomRefs.call(this, aInputFields);
} else {
return fnPatchedItemNavigationsetItemDomRefs.call(this, aItemDomRefs);
}
}