ngGrid 2.0.14 row selection isn't working with the new version of Google Chrome and ngAnimate

Question

A few days ago (may 2015), Google Chrome released a new version (43.0.2357.65 m).
With this new version, an ng-grid feature stopped working:

Symptom:
When I click a row, the row isn't highlighted

After running some tests, I've managed to reproduce the problem from zero:

1. Create an angular app that requires ng-grid 2.0.14 and ngAnimate.
2. With the old Google Chrome version, the row is correctly highlighted.
   With the new version of Google Chrome, the row isn't highlighted (although it is selected)

I've created two plunkers:

Plunkr 1: App without ngAnimate
http://plnkr.co/edit/2pSBX9K0QaeaSihMKnGG?p=preview
When selecting a row, the row is highlighted, regardless Chrome version

Plunkr 2: App WITH ngAnimate
http://plnkr.co/edit/hyRO4fTwglSCL8KCTgHA?p=preview
When selecting a row, the row is highlighted in the old Chrome version, but in the new Chrome version this isn't working!

Also if you check in Plunkr 2 with Chrome Inspector after selecting a row, you can see that the row indeed gets the class .ngRow.selected (this class makes the row highlighted, by changing its background color) but is Chrome the one who is not visually representing this change (this class acquisition)

How can I solve this? any clues?

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

This is a fork of the second plunkr, in which I've disabled animations for every item that doesn't have the class "angular-animate" in it, ie:

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

This works (now rows are highlighted after selection) but if you are using animations in your app, this will mostly break every other animation! like bootstrap-ui modals for example. So, this is not a solution, but an idea: I need to disable animations for ng-grid only. How do I achieve that?

classNameFilter(x) enables animations for only the items with the class x in them. Is there a similar function for disabling animations for certain items?

Chukar

At the end, my angular application uses angular-animate for two reasons: bootstrap ui modals and the library angular toaster. So I've added classNameFilter(/modal|toast/), which enables animations for those matched items and disables animations for everything else (ie: ng-grids rows) – Chukar

I posted a potential solution to the GitHub issue: github.com/angular-ui/ng-grid/issues/3574 - try rebuilding the columns. I had success with this on Chrome Version 43.0.2357.124 m – Asante

Answer 1

Try this:

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 to DI $timeout though.

Entomo

Thats some horrible solution though. Imagine pasting that block of code into every grid definition. Instead of that block, you can try scope.gridOptions.ngGrid.buildColumns(); or $(window).resize(), inside afterSelectionChange – Chukar

Answer 2

As a workaround I created a simple plugin that you can register in ng-grid's 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!

Nady