Filter with an object as defaultValue is still visible after user click the remove filter button

[hmatthieu]

What you were expecting:
When a user clicks the remove filter button, the filter should not be active anymore and should be hidden from the UI.

What happened instead:
The filter is not active but is still visible in the UI.

Steps to reproduce:
Pass an object to the defaultValue prop of a filters List prop. In the react-admin simple example, you can replace in examples/simple/src/posts/PostList.tsx:l56

<QuickFilter
    label="resources.posts.fields.commentable"
    source="commentable"
    defaultValue
/>

with

<QuickFilter
    label="resources.posts.fields.commentable"
    source="commentable"
    defaultValue={{ commentEnabled: true, readOnly: false }}
/>

See this live example:
https://stackblitz.com/edit/github-kh8m7q?file=src%2Fposts%2FPostList.tsx

• Open the Posts page
• Press "Add a filter" to open the filters
• Press "Commentable" (The filter becomes activated and visible)
• Remove the "Commentable" filter (The filter becomes deactivated but is still visible)

Related code:
https://stackblitz.com/edit/github-kh8m7q?file=src%2Fposts%2FPostList.tsx

Other information:
At first, I thought it could be a design choice from React-Admin to not handle complex objects, but it's clear in the codebase that some logic is implemented to cover this use case. I would be happy to submit a merge request, but I want to first check if you agree that it's indeed a bug.

A quick note regarding why a complex object is beneficial: With a server that exposes database queries as an object, it's super easy to write filters that are passed from the UI to the database without any processing in between. express-restify-mongoose is a good example, as well as GQL.

How to fix
The issue comes from packages/ra-ui-materialui/src/list/filter/FilterForm.tsx:getFilterFormValues(), and how react-admin rebuilds the filter (See codebase comments from l256 to l260).
When the user hides the filter, react-admin tries to reset the filter value, but this blank value is not compatible with how getShownFilters:l119 chooses to display or not display a filter. This results in a misalignment between the filter state and the filter visibility.

To maintain the same behavior but allow a better reset behavior, the developer could provide a reset value, or react-admin might use the defaultFilterValue. There are different options to avoid breaking anything, and I'm happy to have your feedback on this.

How to bypass
Currently, the best way I found is to define a simple filter defaultValue, catch this value in the data provider, and replace it with the complex filter.

Environment

• React-admin version: Latest master (92dca0b)
• Last version that did not exhibit the issue (if applicable):
• React version: 17.0.2
• Browser: Any
• Stack trace (in case of a JS error):

[erwanMarmelab]

reproduced, thanks 🙏

[djhi]

Closed by #9898