fix(selection): Prevent space bar scrolling (#6410)

- Fix the parameters of $scope.headerButtonClick in selection.js.
- Prevent space bar from scrolling on headers and selection cells.

Author: classix-od

src/features/selection/js/selection.js

@@ -708,13 +708,20 @@
         link: function ($scope, $elm, $attrs, uiGridCtrl) {
           var self = uiGridCtrl.grid;
           $scope.selectButtonClick = selectButtonClick;
+          $scope.selectButtonKeyDown = selectButtonKeyDown;
 
           // On IE, prevent mousedowns on the select button from starting a selection.
           //   If this is not done and you shift+click on another row, the browser will select a big chunk of text
           if (gridUtil.detectBrowser() === 'ie') {
             $elm.on('mousedown', selectButtonMouseDown);
           }
 
+          function selectButtonKeyDown(row, evt) {
+            if (evt.keyCode === 32) {
+              evt.preventDefault();
+              selectButtonClick(row, evt);
+            }
+          }
 
           function selectButtonClick(row, evt) {
             evt.stopPropagation();
@@ -759,7 +766,14 @@
         link: function ($scope, $elm, $attrs, uiGridCtrl) {
           var self = $scope.col.grid;
 
-          $scope.headerButtonClick = function (row, evt) {
+          $scope.headerButtonKeyDown = function (evt) {
+            if (evt.keyCode === 32 || evt.keyCode === 13) {
+              evt.preventDefault();
+              $scope.headerButtonClick(evt);
+            }
+          };
+
+          $scope.headerButtonClick = function (evt) {
             if (self.selection.selectAll) {
               uiGridSelectionService.clearSelectedRows(self, evt);
               if (self.options.noUnselect) {
@@ -846,6 +860,7 @@
                 }
 
                 if (evt.keyCode === 32 && $scope.col.colDef.name === "selectionRowHeaderCol") {
+                  evt.preventDefault();
                   uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, evt, ($scope.grid.options.multiSelect && !$scope.grid.options.modifierKeysToMultiSelect), $scope.grid.options.noUnselect);
                   $scope.$apply();
                 }

src/features/selection/templates/selectionRowHeaderButtons.html

@@ -2,6 +2,7 @@
   class="ui-grid-selection-row-header-buttons ui-grid-icon-ok"
   ng-class="{'ui-grid-row-selected': row.isSelected}"
   ng-click="selectButtonClick(row, $event)"
+  ng-keydown="selectButtonKeyDown(row, $event)">
   role="checkbox"
   ng-model="row.isSelected">
    

src/features/selection/templates/selectionSelectAllButtons.html

@@ -1,5 +1,6 @@
 <div
   class="ui-grid-selection-row-header-buttons ui-grid-icon-ok"
   ng-class="{'ui-grid-all-selected': grid.selection.selectAll}"
-  ng-click="headerButtonClick($event)">
+  ng-click="headerButtonClick($event)"
+  ng-keydown="headerButtonKeyDown($event)">
 </div>

src/js/core/directives/ui-grid-header-cell.js

@@ -163,6 +163,12 @@
               }
             };
 
+            $scope.handleKeyDown = function(event) {
+              if (event.keyCode === 32) {
+                event.preventDefault();
+              }
+            };
+
             $scope.moveFn = function( event ){
               // Chrome is known to fire some bogus move events.
               var changeValue = event.pageX - previousMouseX;
@@ -363,8 +369,15 @@
                 }).catch(angular.noop);
             };
 
+            $scope.headerCellArrowKeyDown = function(event) {
+              if (event.keyCode === 32 || event.keyCode === 13) {
+                event.preventDefault();
+                $scope.toggleMenu(event);
+              }
+            }; 
 
             $scope.toggleMenu = function(event) {
+
               event.stopPropagation();
 
               // If the menu is already showing...

src/templates/ui-grid/uiGridHeaderCell.html

@@ -6,6 +6,7 @@
   <div
     role="button"
     tabindex="0"
+    ng-keydown="handleKeyDown($event)"
     class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"
     col-index="renderIndex"
     title="TOOLTIP">
@@ -39,6 +40,7 @@
     class="ui-grid-column-menu-button"
     ng-if="grid.options.enableColumnMenus && !col.isRowHeader  && col.colDef.enableColumnMenu !== false"
     ng-click="toggleMenu($event)"
+    ng-keydown="headerCellArrowKeyDown($event)"
     ng-class="{'ui-grid-column-menu-button-last-col': isLastCol}"
     ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"
     aria-haspopup="true">