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:
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?
We've just released Chrome Dev 107 (107.0. 5284.2) for Android.
What is the latest version of Chrome? As of June 21, 2022, the latest version is 103.0. 5060.53.
Keeping your browser, installed software and operating system updated to the latest versions is highly recommended. These updates take care of known security issues and sometimes bring cool new features. Here's how to update your Chrome browser: Open the Chrome browser on your computer.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With