NgGrid 2.0.14 row selection does not work with new version of Google Chrome and ngAnimate

Question

A few days ago (possibly 2015) Google Chrome released a new version (43.0.2357.65 m).
With this new version, the ng-grid function has stopped working:

Symptom:
When I click on a line, the line is not highlighted

After running some tests, I was able to reproduce the problem from scratch:

• Build an angular app that requires ng-grid 2.0.14 and ngAnimate.
• With the old version of Google Chrome, the line is correctly highlighted. In the new version of Google Chrome, the line is not highlighted (although it is selected)

I created two plungers:

Plunkr 1: an application without ngAnimate
http://plnkr.co/edit/2pSBX9K0QaeaSihMKnGG?p=preview
When you select a row, the row is highlighted regardless of the version of Chrome

Plunkr 2: app with ngAnimate
http://plnkr.co/edit/hyRO4fTwglSCL8KCTgHA?p=preview
When you select a row, the row is highlighted in the old version of Chrome, but in the new version of Chrome it does not work!

Also, if you test Plunkr 2 using the Chrome Inspector after selecting a row, you will see that the row does receive the .ngRow.selected class (this class selects the row by changing its background color), but there is one Chrome that does not visually represent this change ( acquisition of this class)

How can i solve this? any clues?

Edit:
I created a third plunkr:
http://plnkr.co/edit/cWMlKEz39n8K52VWH9q8?p=preview

This is the fork of the second plunkr, in which I turned off animations for each element that does not have the "angular-animate" class in it, that is:

 app1.config(['$animateProvider', function($animateProvider){ $animateProvider.classNameFilter(/angular-animate/); }]); 

This works (now the lines are highlighted after selection), but if you use animation in your application, it will basically break up every other animation! for example bootstrap-ui. So this is not a solution, but an idea: I need to disable animation only for ng-grid. How to achieve this?

classNameFilter(x) allows animations only for elements with class x . Is there a similar function to disable animation for certain elements?

Answer 1

Try the following:

 afterSelectionChange: function(rowItem, event) { var x = document.querySelectorAll(".ng-scope .ngRow"); x[rowItem.rowIndex].style["webkitUserSelect"] = "none"; $timeout(function() { x[rowItem.rowIndex].style["webkitUserSelect"] = "text"; }, 100); } 

This fix works in several projects. Remember the DI $ timeout though.

Answer 2

As a workaround, I created a simple plugin that you can register with the ng-grid options object:

 //controller $scope.gridOptions = { data : "myData", plugins: [ new ngGridFixChromeSelectionBugPlugin() ] }; //plugin function ngGridFixChromeSelectionBugPlugin() { var self = this; self.init = function (scope, grid, services) { self.services = services; self.grid = grid; //check if the browser is Chrome (for performance issues) if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { // mousedown event on row selection grid.$viewport.on('mousedown', self.onRowMouseDown); } }; self.onRowMouseDown = function (event) { // Get the closest row element from where we click. var targetRow = $(event.target).closest('.ngRow'); if (targetRow) { self.grid.buildColumns(); } }; } 

this fix worked for me!