fix(Selection): Prevent IE from selecting text

On shift+select, IE was selecting a big range of text. To prevent this we need to add a mousedown handler on the select button to prevent starting a selection. Fixes #3392
angular-ui · May 26, 2015 · a1bbc0c · a1bbc0c
1 parent 9b2c6d5
commit a1bbc0c
Showing 1 changed file with 30 additions and 13 deletions.
diff --git a/src/features/selection/js/selection.js b/src/features/selection/js/selection.js
@@ -461,7 +461,7 @@
           }
 
           if (selected && noUnselect){
-            // don't deselect the row 
+            // don't deselect the row
           } else if (row.enableSelection !== false) {
             row.setSelected(!selected);
             if (row.isSelected === true) {
@@ -642,27 +642,27 @@
 
                 uiGridCtrl.grid.addRowHeaderColumn(selectionRowHeaderDef);
               }
-              
+
               var processorSet = false;
-              
+
               var processSelectableRows = function( rows ){
                 rows.forEach(function(row){
                   row.enableSelection = uiGridCtrl.grid.options.isRowSelectable(row);
                 });
                 return rows;
               };
-              
+
               var updateOptions = function(){
                 if (uiGridCtrl.grid.options.isRowSelectable !== angular.noop && processorSet !== true) {
                   uiGridCtrl.grid.registerRowsProcessor(processSelectableRows, 500);
                   processorSet = true;
                 }
               };
-              
+
               updateOptions();
 
               var dataChangeDereg = uiGridCtrl.grid.registerDataChangeCallback( updateOptions, [uiGridConstants.dataChange.OPTIONS] );
-  
+
               $scope.$on( '$destroy', dataChangeDereg);
             },
             post: function ($scope, $elm, $attrs, uiGridCtrl) {
@@ -673,8 +673,8 @@
       };
     }]);
 
-  module.directive('uiGridSelectionRowHeaderButtons', ['$templateCache', 'uiGridSelectionService',
-    function ($templateCache, uiGridSelectionService) {
+  module.directive('uiGridSelectionRowHeaderButtons', ['$templateCache', 'uiGridSelectionService', 'gridUtil',
+    function ($templateCache, uiGridSelectionService, gridUtil) {
       return {
         replace: true,
         restrict: 'E',
@@ -683,8 +683,18 @@
         require: '^uiGrid',
         link: function($scope, $elm, $attrs, uiGridCtrl) {
           var self = uiGridCtrl.grid;
-          $scope.selectButtonClick = function(row, evt) {
+          $scope.selectButtonClick = selectButtonClick;
+
+          // 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 selectButtonClick(row, evt) {
             evt.stopPropagation();
+
             if (evt.shiftKey) {
               uiGridSelectionService.shiftSelect(self, row, evt, self.options.multiSelect);
             }
@@ -694,7 +704,14 @@
             else {
               uiGridSelectionService.toggleRowSelection(self, row, evt, (self.options.multiSelect && !self.options.modifierKeysToMultiSelect), self.options.noUnselect);
             }
-          };
+          }
+
+          function selectButtonMouseDown(evt) {
+            if (evt.ctrlKey || evt.shiftKey) {
+              evt.target.onselectstart = function () { return false; };
+              window.setTimeout(function () { evt.target.onselectstart = null; }, 0);
+            }
+          }
         }
       };
     }]);
@@ -814,7 +831,7 @@
             var selectCells = function(evt){
               // if we get a click, then stop listening for touchend
               $elm.off('touchend', touchEnd);
-              
+
               if (evt.shiftKey) {
                 uiGridSelectionService.shiftSelect($scope.grid, $scope.row, evt, $scope.grid.options.multiSelect);
               }
@@ -825,7 +842,7 @@
                 uiGridSelectionService.toggleRowSelection($scope.grid, $scope.row, evt, ($scope.grid.options.multiSelect && !$scope.grid.options.modifierKeysToMultiSelect), $scope.grid.options.noUnselect);
               }
               $scope.$apply();
-              
+
               // don't re-enable the touchend handler for a little while - some devices generate both, and it will
               // take a little while to move your hand from the mouse to the screen if you have both modes of input
               $timeout(function() {
@@ -848,7 +865,7 @@
                 // short touch
                 selectCells(evt);
               }
-              
+
               // don't re-enable the click handler for a little while - some devices generate both, and it will
               // take a little while to move your hand from the screen to the mouse if you have both modes of input
               $timeout(function() {