ReferenceManyField having Datagrid inside should support sorting

[rkyrychuk]

What you were expecting:
ReferenceManyField having datagrid inside should support sorting

What happened instead:
Sorting is not working, console show warning in debug mode

Warning: Failed prop type: Invalid prop `currentSort` of type `string` supplied to `ReferenceManyFieldView`, expected `object`.

Steps to reproduce:
Any ReferenceManyField with Datagrid inside

Related code:
sortBy function from here support object, not string.

const { sort, setSort } = useSortState(initialSort);

But value passed from Datagrid.js is string

setSort(event.currentTarget.dataset.sort);

When datagrid is handled by list controller, it change current sort object. But here ReferenceManyField just pass value from datagrid
I don't know your code standards so I'm not proposing pull request, but my code ovveride that fix the problem looks like that:

add static function that change order in ReferenceManyField.js

const switchOrder = (order, defaultOrder) => order ? (order === "DESC" ? "ASC" : "DESC") : defaultOrder

create updateSort function in ReferenceManyField render

const updateSort = useCallback(field => setSort({ field, order: switchOrder(sort.order, "DESC") }), [setSort, sort.order]) 

map it to ReferenceManyFieldView

return ( <ReferenceManyFieldView
      {...props}
      {...{
        currentSort: sort,
        page,
        perPage,
        setPage,
        setPerPage,
        setSort: updateSort,
        ...controllerProps,
      }}
    />)

Environment

• React-admin version: 3.0.0-alpha3
• Last version that did not exhibit the issue (if applicable):
• React version: 16.8.6
• Browser: Chrome
• Stack trace (in case of a JS error):

Warning: Failed prop type: Invalid prop `currentSort` of type `string` supplied to `ReferenceManyFieldView`, expected `object`.
    in ReferenceManyFieldView (created by ReferenceManyField)
    in ReferenceManyField (at TestShow.js:39)
    in div (created by Tab)
    in span (created by Tab)
    in Tab (created by Context.Consumer)
    in translate(Tab) (at TestShow.js:35)
    in Route (created by TabbedShowLayout)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by CardContentInner)
    in CardContentInner (created by TabbedShowLayout)
    in div (created by TabbedShowLayout)
    in TabbedShowLayout (created by Context.Consumer)
    in translate(TabbedShowLayout) (created by Context.Consumer)
    in withRouter(translate(TabbedShowLayout)) (at TestShow.js:34)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by ShowView)
    in div (created by ShowView)
    in div (created by ShowView)
    in ShowView (created by Show)
    in Show (at DefaultDetails.js:16)
    in DefaultShow (at TestShow.js:33)
    in Unknown (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at resources.js:20)
    in ResourceFor (at resources.js:56)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (at Layout.js:28)
    in Unknown (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in TranslationProviderView (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (at App.js:33)
    in ThemeProvider (at App.js:32)
    in Unknown (at src/index.js:7)
console.<computed> @ index.js:1437
r @ backend.js:6
printWarning @ checkPropTypes.js:21
checkPropTypes @ checkPropTypes.js:76
validatePropTypes @ react.development.js:1716
createElementWithValidation @ react.development.js:1809
ReferenceManyField @ ReferenceManyField.js:107
renderWithHooks @ react-dom.development.js:13450
updateFunctionComponent @ react-dom.development.js:15200
beginWork @ react-dom.development.js:16255
performUnitOfWork @ react-dom.development.js:20285
workLoop @ react-dom.development.js:20326
renderRoot @ react-dom.development.js:20406
performWorkOnRoot @ react-dom.development.js:21363
performWork @ react-dom.development.js:21273
performSyncWork @ react-dom.development.js:21247
interactiveUpdates$1 @ react-dom.development.js:21532
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
index.js:1437 Warning: Failed prop type: Invalid prop `currentSort` of type `string` supplied to `Datagrid`, expected `object`.
    in Datagrid (created by WithStyles(Datagrid))
    in WithStyles(Datagrid) (at TestShow.js:40)
    in ReferenceManyFieldView (created by ReferenceManyField)
    in ReferenceManyField (at TestShow.js:39)
    in div (created by Tab)
    in span (created by Tab)
    in Tab (created by Context.Consumer)
    in translate(Tab) (at TestShow.js:35)
    in Route (created by TabbedShowLayout)
    in div (created by ForwardRef(CardContent))
    in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
    in WithStyles(ForwardRef(CardContent)) (created by CardContentInner)
    in CardContentInner (created by TabbedShowLayout)
    in div (created by TabbedShowLayout)
    in TabbedShowLayout (created by Context.Consumer)
    in translate(TabbedShowLayout) (created by Context.Consumer)
    in withRouter(translate(TabbedShowLayout)) (at TestShow.js:34)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
    in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
    in WithStyles(ForwardRef(Card)) (created by ShowView)
    in div (created by ShowView)
    in div (created by ShowView)
    in ShowView (created by Show)
    in Show (at DefaultDetails.js:16)
    in DefaultShow (at TestShow.js:33)
    in Unknown (created by WithPermissions)
    in WithPermissions (created by Context.Consumer)
    in Route (created by ResourceRoutes)
    in Switch (created by ResourceRoutes)
    in ResourceRoutes (created by Resource)
    in Resource (at resources.js:20)
    in ResourceFor (at resources.js:56)
    in Route (created by RoutesWithLayout)
    in Switch (created by RoutesWithLayout)
    in RoutesWithLayout (created by Context.Consumer)
    in div (created by Layout)
    in main (created by Layout)
    in div (created by Layout)
    in div (created by Layout)
    in Layout (created by WithStyles(Layout))
    in WithStyles(Layout) (created by Context.Consumer)
    in withRouter(WithStyles(Layout)) (created by ConnectFunction)
    in ConnectFunction (created by LayoutWithTheme)
    in ThemeProvider (created by LayoutWithTheme)
    in LayoutWithTheme (at Layout.js:28)
    in Unknown (created by Context.Consumer)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by ConnectFunction)
    in ConnectFunction (created by Context.Consumer)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by Context.Consumer)
    in ConnectedRouterWithContext (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in TranslationProviderView (created by ConnectFunction)
    in ConnectFunction (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (at App.js:33)
    in ThemeProvider (at App.js:32)
    in Unknown (at src/index.js:7)

[djhi]

Thanks! Would you mind making a pull request ?

[Sheraff]

It'd be awesome to have sort, pagination and filter work for datagrids in all multiple references components (ReferenceArrayField, ReferenceArrayInput and ReferenceManyField).

[fzaninotto]

fixed by #3859