fix(cellNav): add an empty element to focus on instead of focusing on the viewport

Focusing on the viewport caused the entire grid to scroll into view when navigating to  a cell

Author: swalters

src/features/cellnav/js/cellnav.js

@@ -766,15 +766,21 @@
       };
     }]);
 
-  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
         require: ['^uiGrid', '^uiGridRenderContainer', '?^uiGridCellnav'],
         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('<div class="ui-grid-focuser" tabindex="-1"></div>')($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();
               });
 
             }