diff --git a/src/features/cellnav/js/cellnav.js b/src/features/cellnav/js/cellnav.js index 9d0047ce1d..74907796e0 100644 --- a/src/features/cellnav/js/cellnav.js +++ b/src/features/cellnav/js/cellnav.js @@ -766,8 +766,9 @@ }; }]); - module.directive('uiGridViewport', ['$timeout', '$document', 'gridUtil', 'uiGridConstants', 'uiGridCellNavService', 'uiGridCellNavConstants','$log', - function ($timeout, $document, gridUtil, uiGridConstants, uiGridCellNavService, uiGridCellNavConstants, $log) { + module.directive('uiGridViewport', ['$timeout', '$document', 'gridUtil', 'uiGridConstants', 'uiGridCellNavService', 'uiGridCellNavConstants','$log','$compile', + function ($timeout, $document, gridUtil, uiGridConstants, uiGridCellNavService, uiGridCellNavConstants, $log, $compile) { + var focuser; return { replace: true, priority: -99999, //this needs to run very last @@ -775,6 +776,11 @@ scope: false, compile: function () { return { + pre: function ($scope, $elm, $attrs, uiGridCtrl) { + //add an element with no dimensions that can be used to set focus and capture keystrokes + focuser = $compile('
')($scope); + $elm.append(focuser); + }, post: function ($scope, $elm, $attrs, controllers) { var uiGridCtrl = controllers[0], renderContainerCtrl = controllers[1]; @@ -787,11 +793,10 @@ var grid = uiGridCtrl.grid; - // Let the render container be focus-able - $elm.attr("tabindex", -1); + focuser[0].focus(); // Bind to keydown events in the render container - $elm.on('keydown', function (evt) { + focuser.on('keydown', function (evt) { evt.uiGridTargetRenderContainerId = containerId; var rowCol = uiGridCtrl.grid.api.cellNav.getFocusedCell(); var result = uiGridCtrl.cellNav.handleKeyDown(evt); @@ -839,8 +844,8 @@ }); grid.api.cellNav.on.navigate($scope, function () { - //focus the viewport because this can sometimes be lost - $elm[0].focus(); + //focus again because it can be lost + focuser[0].focus(); }); }