Skip to content

SimpleTableManual sort on empty values incorrect on FirefoxΒ #421

@wimbarelds

Description

@wimbarelds

Describe the bug
SimpleTableManual's sorting is reversed in Firefox when orderedBy is empty, or a non-existing column.

As a result, in 'editable' mode, where orderedBy is always an empty string, sorting is always reversed (in Firefox).

The rows being reversed also causes row-actions (such as Delete or Edit) to be applied to the incorrect row (because these send the client-index to the server, while the server's rows aren't reversed.

The cause of this issue:

Chrome and Firefox use a different underlying sorting algorithm. As an example, this snippet:

[1, 2].sort((a, b) => -1)

returns [2, 1] in Chrome, but [1, 2] in Firefox.

SimpleTableManual uses the following comparator function:

function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
  if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
    return -1;
  }
  if (!a[orderedBy] || b[orderedBy] > a[orderedBy]) {
    return 1;
  }
  return 0;
}

When a[orderedBy] and b[orderedBy] are both falsy (false, 0, null, undefined or ""), this function will return -1, which causes the firefox results to come out in reversed order.

A fixed version of this function would be

function descendingComparator<T>(a: T, b: T, orderedBy: keyof T) {
  if (!orderedBy || !a[orderedBy] && !b[orderedBy]) {
    return 0;
  }
  if (!b[orderedBy] || b[orderedBy] < a[orderedBy]) {
    return -1;
  }
  if (!a[orderedBy] || b[orderedBy] > a[orderedBy]) {
    return 1;
  }
  return 0;
}

To Reproduce
Steps to reproduce the behavior:

  1. Compare the row-order of an editable SimpleTableManual in Chrome and Firefox
  2. See difference
  3. Try edit the first of multiple rows in Firefox
  4. See that you're editing the last row instead

Expected behavior

  1. The same order in Chrome and Firefox
  2. The correct item being edited

Desktop:

  • OS: MacOS
  • Browser Firefox

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions