react-admin: Calling setSort and setFilters after one another filckers and doesn't setSort
What you were expecting:
I’ve built a button and added it as part of the actions props on a List component. This button is intended to clear the filters applied to the List as well as return the sort to its default value. The button calls the setSort and setFilters functions that are passed in as props to actions. I expected the filters to be cleared and the sort to return to its default value.
What happened instead:
Instead, what I’m seeing is that the filters are cleared (as expected) however the sort “flicks” to the default sort options and then flicks back to the previously selected sort.
If I call setSort alone or setFilters alone, they behave as expected and it seems that this issue only occurs when both are called after one another.
Steps to reproduce:
- Go to the Posts list in the following sandbox.
- Click on the “Title” column to sort posts by title.
- In the search box, type “Mai” to add a filter.
- Then click the “Clear sort and filters” button in the top right.
- You’ll see the sort goes back to “Published At” as expected but then flicks back to “Title”.
https://codesandbox.io/s/elastic-raman-kvypc
Environment
- React-admin version: 3.1.0
- Last version that did not exhibit the issue (if applicable): 2.x
- React version: 16.12.0
- Browser: Chrome (v. 78.0.3904.108)
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Comments: 16 (13 by maintainers)
Commits related to this issue
- [Doc] Add warning about using setFilters with other callbacks Closes #4189 — committed to marmelab/react-admin by fzaninotto 5 months ago
In 4.0, we’ve found a workaround for this issue that I hope others will find helpful.
After upgrading, I examined the Saved Query feature that has become available in version 4, and the way that loading a saved query uses react-router’s useNavigate hook to change the URL instead of changing list context with setFilters, setSort, etc. The relevant code is found in the FilterButton component.
I’m happy to report that calling navigate() with the list parameters will (so far) reliably change the filters and sort without debounce issues. Not sure if this closes the issue or not since presumably setSort and setFilters should still be able to be called simultaneously, but using useNavigate() essentially solves the implementation for my part.
We should probably expose a
setListParamshere as the navigate workaround isn’t always the solution (Fields that exposes a ListContext)+1 for this issue, I just ran into it as well.
In our case, we have a set of tabs which swap out
Datagrids within a list, and we wanted to make one of thoseDatagrids default to sorting on a different column than the others. The tab change effectively callssetFiltersto filter by the given status represented by one of the tabs.The debouncing fix doesn’t seem to work for us — it just results in the sort getting applied, but not the filter.