Support Article
Tab key event does not work on repeat grid layout
SA-41124
Summary
In a repeat grid, the Tab key shifts browser focus to the next row instead of the next editable field. Clicking the Tab button twice shifts focus to the next editable field.Error Messages
Not Applicable
Steps to Reproduce
- Configure a repeat grid
- Navigate the grid using the Tab key at run time
Root Cause
This behavior is as per design.
In a repeat grid, focus can be set to editable field for the first row only.
It cannot be achieved for other rows as:
- the Input ID’s are the same as that of the first row and other rows added dynamically
- the Tabindex is generated dynamically and cannot be set for others rows
- the <TR> cannot be skipped for newly created rows even if the Tabindex is set
Resolution
For the browser to focus on the first row, perform the below steps:
1) Include the below function in the UserWorkForm,
function disableFocusOnHiddenGridHeaderCells() {
$("#gridLayoutTable table.gridTable th.gridCell").attr('tabindex', '-1');
$("#gridLayoutTable table.gridTable tr.cellCont td.gridCell").attr('tabindex', '-1');
$(document).ready(function() {
$('input:visible:enabled:first').focus();
});
}
2) Call the above function in an onTab event and RunScript action of a field before the grid.
Published September 18, 2017 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.