setSort in listContext changes order if supplied with same SortPayload

What you were expecting: When using the setSort from listContext it does not apply the correct values for repeated calls with the same object. I.e. calling setSort({ field: 'myField', order: 'DESC' }) twice will set order to ASC.

Steps to reproduce: I used the code of this page: https://marmelab.com/react-admin-demo/#/commands and added the setSort in the handleChange callback of TabbedDatagrid:

  const handleChange = useCallback(
    (_event: React.ChangeEvent<{}>, value: any) => {
      setFilters &&
        setFilters(
          { ...filterValues, value: value },
          displayedFilters,
          false // no debounce, we want the filter to fire immediately
        )
        setSort({ field: 'myField', order: 'DESC' })
    },
    [displayedFilters, filterValues, setFilters]
  )

Other information: Purpose: I want to adjust the sorting for each table when selected. Work-around was a check if the new sorting is different from the current one and only change if true.

      let newSort: SortPayload =
        value === myEnum.State1
          ? { field: 'myField', order: 'DESC' }
          : { field: 'myOtherField', order: 'DESC' }

      if (newSort.field != sort.field && newSort.order != sort.order) {
        setSort(newSort)
      }

Environment

• React-admin version: 4.5.3
• Last version that did not exhibit the issue (if applicable): n.a.
• React version: 18
• Browser: Chrome 107.0.5304.88

[fzaninotto]

Nice! Thanks for sharing your code.

[sebastianbuechler]

So I decided to implement the sophisticated approach outside of RA. Works like a charm and maybe it’s too much effort to integrate it into RA.

const TabbedDatagrid = () => {
  const listContext = useListContext()
  const { filterValues, setFilters, displayedFilters, setSort, sort } = listContext
  const totals = useGetTotals(filterValues) as any

  const [savedSorts, setSavedSorts] = React.useState<
    Partial<Record<MyEnum, SortPayload>>
  >({
    [MyEnum.ACTIVE]: { field: 'field1', order: 'ASC' },
    [MyEnum.CANCELLED]: {field: 'field1', order: 'DESC' },
    [MyEnum.ARCHIVED]: { field: 'field2', order: 'DESC' },
  })

  React.useEffect(() => {
    setSavedSorts({ ...savedSorts, [filterValues.value]: sort })
  }, [sort])

  const handleChange = useCallback(
    (_event: React.ChangeEvent<{}>, value: MyEnum) => {
      const savedSort = savedSorts[value]!

      const isNewList = value != filterValues.value
      const orderingWillBeDifferent = savedSort.field != sort.field || savedSort.order != sort.order
      if (isNewList && orderingWillBeDifferent) {
          setSort(savedSort)
      }

      setFilters &&
        setFilters(
          { ...filterValues, value: value },
          displayedFilters,
          false // no debounce, we want the filter to fire immediately
        )
    },
    [displayedFilters, filterValues, setFilters]
  )

  return ...
  }