Chromium browsers exhibit strange behavior with AngularJS orderBy, causing issues with clearing sorting selections

Question

Chromium browsers exhibit strange behavior with AngularJS orderBy, causing issues with clearing sorting selections

There is a particular issue that is really frustrating me in one of my projects.

The code I have is quite similar to this example (I tried to replicate it as closely as possible, but the actual code doesn't seem to be relevant because I can't reproduce the issue there anyway): http://plnkr.co/edit/SCUCsxLgu2zFzMhZ0whs?p=preview

The problem arises when I set predicate='' - the sorting doesn't completely clear. Angular seems to rearrange my elements in a different order (as seen in this screenshot with predicate=''):

When I removed the orderBy, everything displayed in the correct order (similar to how it was retrieved from the repository). Despite numerous attempts with orderBy, I couldn't fully reset the sorting.

I came across a similar case here: AngularJS ngRepeat orderBy in Chrome, but it turns out that my situation is not related to that specific issue.

Being patient, I delved into the angular.js file (AngularJS v1.3.15) for debugging purposes. The critical line appears to be:

return slice.call(array).sort(reverseComparator(comparator, reverseOrder));

Before slice.call(array), the array maintains its order. However, the result gets jumbled up after executing the sort function. This prompted me to do the following:

function comparator(o1, o2) {
  for (var i = 0; i < sortPredicate.length; i++) {
    var comp = sortPredicate[i](o1, o2);
    if (comp !== 0){
      console.log(7);  // <---------------------
      return comp;
    }
  }
  console.log(0);      // <---------------------
  return 0;
}

function reverseComparator(comp, descending) {
  return descending
      ? function(a, b) {return comp(b,a);}
      : comp;
}

To my surprise, on setting predicate='', my console outputs only zeros. Additionally, running:

slice.call(array).sort

...yields:

function sort() { [native code] }

So, the reason behind this unexpected sorting remains unknown to me. Interestingly, this issue only occurs in Chromium-based browsers (tested on Chrome and Opera). FireFox and IE11 clear the sorting as expected.

Initially, I considered this to be a bug in Chromium, yet I haven't been able to replicate it in the Plnkr setup. I'm left wondering if there's something different about the data that could be causing this discrepancy...

I even tried disabling all my Chrome extensions, but it had no impact on the issue either.

Given the popularity of both Chromium and Angular, has anyone else encountered this anomaly before?

Any insights or suggestions on what might be causing this issue would be greatly appreciated!

UPDATE:

Finally, I believe I've managed to reproduce the problem by adding more items to my array. Check it out here: http://plnkr.co/edit/SCUCsxLgu2zFzMhZ0whs?p=preview

(celebration time! :D)

I plan to report this to the Angular team in hopes that they, being Google, might address and resolve this issue with Chromium as well. :D

javascript arrays angularjs sorting

Answer 1

Answer №1

According to the ECMAScript guidelines

It is important to note that the sorting process may not be stable, meaning elements that are equal in comparison may not stay in their original order.

Therefore, it's crucial to understand that this behavior is intentional and not a browser bug.

When examining the Angular code, special consideration is given to an empty predicate:

if (predicate === '') {
  // By treating an empty predicate as no predicate at all, we can compare identity
  return reverseComparator(compare, descending);
}

The function for compare looks like this:

function compare(v1, v2) {
  var t1 = typeof v1;
  var t2 = typeof v2;
  if (t1 === t2 && t1 === "object") {
    v1 = objectToString(v1);
    v2 = objectToString(v2);
  }
  ...

The objectToString function is defined as follows:

function objectToString(value) {
  if (value === null) return 'null';
  if (typeof value.valueOf === 'function') {
    value = value.valueOf();
    if (isPrimitive(value)) return value;
  }
  if (typeof value.toString === 'function') {
    value = value.toString();
    if (isPrimitive(value)) return value;
  }
  return '';
}

If your objects do not have their own valueOf or toString methods, they will end up being considered equal (likely resulting in "[object Object]"). This aligns with the specifications outlined by ECMAScript.

Answer 2

According to the ECMAScript guidelines

It is important to note that the sorting process may not be stable, meaning elements that are equal in comparison may not stay in their original order.

Therefore, it's crucial to understand that this behavior is intentional and not a browser bug.

When examining the Angular code, special consideration is given to an empty predicate:

if (predicate === '') {
  // By treating an empty predicate as no predicate at all, we can compare identity
  return reverseComparator(compare, descending);
}

The function for compare looks like this:

function compare(v1, v2) {
  var t1 = typeof v1;
  var t2 = typeof v2;
  if (t1 === t2 && t1 === "object") {
    v1 = objectToString(v1);
    v2 = objectToString(v2);
  }
  ...

The objectToString function is defined as follows:

function objectToString(value) {
  if (value === null) return 'null';
  if (typeof value.valueOf === 'function') {
    value = value.valueOf();
    if (isPrimitive(value)) return value;
  }
  if (typeof value.toString === 'function') {
    value = value.toString();
    if (isPrimitive(value)) return value;
  }
  return '';
}

If your objects do not have their own valueOf or toString methods, they will end up being considered equal (likely resulting in "[object Object]"). This aligns with the specifications outlined by ECMAScript.

Answer 3

Answer №2

After much consideration, I have decided to implement a solution using custom filters like the following:

(function () {

    function isStringEmpty(str) {
        return str === '' || str === undefined || str === null;
    }

    angular.module('CustomFilters', [])
        .filter('okOrderBy', ['$filter', function ($filter) {

            return function (array, predicate, reverse) {
                if (isStringEmpty(predicate)) return array;
                return $filter('orderBy')(array, predicate, reverse);
            };
        }
        ])
        .filter('arrayOrderBy', [function () {

            function Comparator(predicate, reverse) {
                return reverse ? function (a, b) {
                    a = a[predicate];
                    b = b[predicate];
                    if (a === b) return 0;
                    return a < b ? 1 : -1;
                } : function (a, b) {
                    a = a[predicate];
                    b = b[predicate];
                    if (a === b) return 0;
                    return a < b ? -1 : 1;
                };
            }

            return function (array, predicate, reverse) {
                if (isStringEmpty(predicate)) return array;
                return array.slice(0).sort(new Comparator(predicate, reverse));
            };
        }
        ]);

})();

The second approach functions independently of Angular filters and personally, I find it more appealing.

However, it has limitations such as only working with arrays of objects, requiring property names as predicates, and not accommodating "multiple column" sorts. On the other hand, the first option should be versatile enough to handle a wider range of scenarios.

I faced a tough decision when determining which answer to accept since all responses were valuable and enlightening. I appreciate the contributions from everyone involved. Ultimately, I am leaning towards selecting this particular answer for its efficiency in addressing the issue compared to the alternative proposed by user "YOU."

Answer 4

After much consideration, I have decided to implement a solution using custom filters like the following:

(function () {

    function isStringEmpty(str) {
        return str === '' || str === undefined || str === null;
    }

    angular.module('CustomFilters', [])
        .filter('okOrderBy', ['$filter', function ($filter) {

            return function (array, predicate, reverse) {
                if (isStringEmpty(predicate)) return array;
                return $filter('orderBy')(array, predicate, reverse);
            };
        }
        ])
        .filter('arrayOrderBy', [function () {

            function Comparator(predicate, reverse) {
                return reverse ? function (a, b) {
                    a = a[predicate];
                    b = b[predicate];
                    if (a === b) return 0;
                    return a < b ? 1 : -1;
                } : function (a, b) {
                    a = a[predicate];
                    b = b[predicate];
                    if (a === b) return 0;
                    return a < b ? -1 : 1;
                };
            }

            return function (array, predicate, reverse) {
                if (isStringEmpty(predicate)) return array;
                return array.slice(0).sort(new Comparator(predicate, reverse));
            };
        }
        ]);

})();

The second approach functions independently of Angular filters and personally, I find it more appealing.

However, it has limitations such as only working with arrays of objects, requiring property names as predicates, and not accommodating "multiple column" sorts. On the other hand, the first option should be versatile enough to handle a wider range of scenarios.

I faced a tough decision when determining which answer to accept since all responses were valuable and enlightening. I appreciate the contributions from everyone involved. Ultimately, I am leaning towards selecting this particular answer for its efficiency in addressing the issue compared to the alternative proposed by user "YOU."

Answer 5

Answer №3

Here's a different strategy. Avoid sorting when it's not necessary.

It's great that Angular allows such flexibility.

<tr ng-repeat="friend in (predicate ? (friends | orderBy:predicate:reverse) : friends)">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
  <td>{{friend.age}}</td>
</tr>

http://plnkr.co/edit/KIdAKPtA3JDtRMDD50VI?p=preview

Answer 6

Here's a different strategy. Avoid sorting when it's not necessary.

It's great that Angular allows such flexibility.

<tr ng-repeat="friend in (predicate ? (friends | orderBy:predicate:reverse) : friends)">
  <td>{{friend.name}}</td>
  <td>{{friend.phone}}</td>
  <td>{{friend.age}}</td>
</tr>

http://plnkr.co/edit/KIdAKPtA3JDtRMDD50VI?p=preview

Chromium browsers exhibit strange behavior with AngularJS orderBy, causing issues with clearing sorting selections

Answer №1

Answer №2

Answer №3

Similar questions

Experiencing excessive memory usage when attempting to load a large JSON file in Firefox

failed to succeed when attempting to yarn install

in node.js, virtual machine scripts can import modules using the require function

Displaying different elements using an anchor <a> tag

Assigning a background image based on the quantity of items in an array or object

"Developing an Ionic app that utilizes Angular to send POST requests to a socket

Using jQuery to calculate mathematical operations in a form

Struggling to make a click event work in aframe

"Learn the steps to enable a click-to-select feature for an item, allowing you to drop it in a different location

Troubleshooting issue with ng-hide in AngularJS when using multiple filters

Can we utilize conditions to both select and deselect items using JavaScript and PHP together?

Using Titanium for Android to Display High-Quality Images

React Scheduler by Bryntum

Issues with Line Chart in D3: Scaling and Zoom not functioning as expected due to ClipPath limitations

What sets apart elem['textContent'] from elem.textContent?

Alter the datatype of a struct's array of pointers in real-time

Instructions on changing class when input length is not equal to zero

How to categorize an array of objects based on a specific property while preserving the original object attributes

How can you ensure that the results are displayed only when all the fields in the form are properly

React hooks causing the for loop to only work on the second iteration