Fix filters with complex object are not removed from the UI

cypress/e2e/mobile.cy.js

@@ -9,10 +9,10 @@ describe('Mobile UI', () => {
     });
 
     describe('Infinite Scroll', () => {
-        it.only('should load more items when scrolling to the bottom of the page', () => {
+        it('should load more items when scrolling to the bottom of the page', () => {
             ListPagePosts.navigate();
+            cy.contains('Fusce massa lorem').should('exist');
             cy.contains('Sed quo et et fugiat modi').should('not.exist');
-            cy.scrollTo('bottom');
             cy.wait(500);
             cy.scrollTo('bottom');
             cy.contains('Sed quo et et fugiat modi');

packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Chip } from '@mui/material';
 import { ListBase, memoryStore } from 'ra-core';
 import {
     Admin,
@@ -13,6 +14,7 @@ import {
     TopToolbar,
     SearchInput,
     FilterButtonProps,
+    InputProps,
 } from 'react-admin';
 import fakerestDataProvider from 'ra-data-fakerest';
 import {
@@ -383,6 +385,33 @@ export const WithAutoCompleteArrayInput = (args: {
     );
 };
 
+const QuickFilter = ({ label }: InputProps) => <Chip label={label} />;
+
+export const WithComplexValueFilter = (args: {
+    disableSaveQuery?: boolean;
+}) => {
+    const postFilters: React.ReactElement[] = [
+        <QuickFilter
+            label="Complex"
+            source="nested"
+            defaultValue={{ foo: 'bar' }}
+        />,
+    ];
+    return (
+        <MemoryRouter>
+            <Admin
+                dataProvider={fakerestDataProvider(data)}
+                store={memoryStore()}
+            >
+                <Resource
+                    name="posts"
+                    list={<PostList postFilters={postFilters} args={args} />}
+                />
+            </Admin>
+        </MemoryRouter>
+    );
+};
+
 export const Variant = () => {
     const postFilters: React.ReactElement[] = [
         <TextInput

packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx

@@ -1,3 +1,4 @@
+import { chipClasses } from '@mui/material/Chip';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import expect from 'expect';
 import {
@@ -13,8 +14,9 @@ import { ReferenceInput, SelectInput, TextInput } from '../../input';
 import { Filter } from './Filter';
 import {
     Basic,
-    WithAutoCompleteArrayInput,
     WithArrayInput,
+    WithAutoCompleteArrayInput,
+    WithComplexValueFilter,
 } from './FilterButton.stories';
 import {
     FilterForm,
@@ -209,7 +211,7 @@ describe('<FilterForm />', () => {
         });
     });
 
-    it('should allow to add and clear a filter with a complex object value', async () => {
+    it('should allow to add and clear a filter with a nested value', async () => {
         render(<Basic />);
 
         const addFilterButton = await screen.findByText('Add filter');
@@ -230,6 +232,25 @@ describe('<FilterForm />', () => {
         expect(screen.queryByLabelText('Nested')).toBeNull();
     });
 
+    it('should hide a removed filter with a complex object value', async () => {
+        render(<WithComplexValueFilter />);
+
+        const addFilterButton = await screen.findByText('Add filter');
+        fireEvent.click(addFilterButton);
+        fireEvent.click(await screen.findByText('Complex'));
+        await screen.findByText('1-7 of 7');
+        await screen.findByText('Complex', {
+            selector: `.${chipClasses.root} *`,
+        });
+        fireEvent.click(await screen.findByTitle('Remove this filter'));
+        await screen.findByText('1-10 of 13');
+        expect(
+            screen.queryByText('Complex', {
+                selector: `.${chipClasses.root} *`,
+            })
+        ).toBeNull();
+    });
+
     it('should provide a FormGroupContext', async () => {
         render(<WithArrayInput />);
 

packages/ra-ui-materialui/src/list/filter/FilterForm.tsx

@@ -123,7 +123,7 @@ export const FilterFormBase = (props: FilterFormBaseProps) => {
             return (
                 filterElement.props.alwaysOn ||
                 displayedFilters[filterElement.props.source] ||
-                (filterValue !== '' && typeof filterValue !== 'undefined')
+                !isEmptyValue(filterValue)
             );
         });
     };
@@ -301,3 +301,17 @@ const getInputValue = (
     }
     return get(filterValues, key, '');
 };
+
+const isEmptyValue = (filterValue: unknown) => {
+    if (filterValue === '' || typeof filterValue === 'undefined') return true;
+
+    // If one of the value leaf is not empty
+    // the value is considered not empty
+    if (typeof filterValue === 'object') {
+        return Object.keys(filterValue).every(key =>
+            isEmptyValue(filterValue[key])
+        );
+    }
+
+    return false;
+};