Fix <FilterLiveSearch> should react to filter values change

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

@@ -1,7 +1,11 @@
 import * as React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
-import { Basic, HiddenLabel } from './FilterLiveSearch.stories';
+import {
+    Basic,
+    HiddenLabel,
+    WithFilterButton,
+} from './FilterLiveSearch.stories';
 
 describe('FilterLiveSearch', () => {
     it('renders an empty text input', () => {
@@ -30,6 +34,32 @@ describe('FilterLiveSearch', () => {
         fireEvent.click(screen.getByLabelText('ra.action.clear_input_value'));
         expect(screen.queryAllByRole('listitem')).toHaveLength(27);
     });
+    it('clears the filter when user click on the Remove all filters button', async () => {
+        render(<WithFilterButton />);
+        const filterLiveSearchInput = screen.getByLabelText('ra.action.search');
+        fireEvent.change(filterLiveSearchInput, {
+            target: { value: 'st' },
+        });
+        expect(filterLiveSearchInput.getAttribute('value')).toBe('st');
+        expect(screen.queryAllByRole('listitem')).toHaveLength(2);
+        fireEvent.click(screen.getByLabelText('ra.action.add_filter'));
+        fireEvent.click(await screen.findByText('Remove all filters'));
+        expect(screen.queryAllByRole('listitem')).toHaveLength(27);
+        expect(filterLiveSearchInput.getAttribute('value')).toBe('');
+    });
+    it('updates its value when filter values change', async () => {
+        render(<WithFilterButton />);
+        const filterLiveSearchInput = screen.getByLabelText('ra.action.search');
+        const textInput = screen.getByLabelText('Q');
+        fireEvent.change(textInput, {
+            target: { value: 'st' },
+        });
+        expect(textInput.getAttribute('value')).toBe('st');
+        await waitFor(() => {
+            expect(filterLiveSearchInput.getAttribute('value')).toBe('st');
+        });
+        expect(screen.queryAllByRole('listitem')).toHaveLength(2);
+    });
     describe('hiddenLabel', () => {
         it('turns the label into a placeholder', () => {
             render(<HiddenLabel />);

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

@@ -1,16 +1,25 @@
-import * as React from 'react';
-import { useList, ListContextProvider, useListContext } from 'ra-core';
 import {
     Box,
+    createTheme,
     List,
     ListItem,
     ListItemText,
     ThemeProvider,
-    createTheme,
 } from '@mui/material';
+import {
+    ListContextProvider,
+    ResourceContextProvider,
+    TestMemoryRouter,
+    useList,
+    useListContext,
+} from 'ra-core';
+import * as React from 'react';
 
-import { FilterLiveSearch } from './FilterLiveSearch';
+import { TextInput } from '../../input';
 import { defaultTheme } from '../../theme/defaultTheme';
+import { FilterButton } from './FilterButton';
+import { FilterForm } from './FilterForm';
+import { FilterLiveSearch } from './FilterLiveSearch';
 
 export default {
     title: 'ra-ui-materialui/list/filter/FilterLiveSearch',
@@ -108,3 +117,17 @@ export const Sx = () => (
         <CountryList />
     </Wrapper>
 );
+
+const countryFilters = [<TextInput source="q" alwaysOn />];
+export const WithFilterButton = () => (
+    <TestMemoryRouter>
+        <ResourceContextProvider value="countries">
+            <Wrapper>
+                <FilterLiveSearch source="q" />
+                <FilterForm filters={countryFilters} />
+                <FilterButton filters={countryFilters} />
+                <CountryList />
+            </Wrapper>
+        </ResourceContextProvider>
+    </TestMemoryRouter>
+);

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

@@ -61,7 +61,7 @@ export const FilterLiveSearch = memo((props: FilterLiveSearchProps) => {
         [filterValues, source]
     );
 
-    const form = useForm({ defaultValues: initialValues });
+    const form = useForm({ values: initialValues });
 
     const onSubmit = e => {
         e.preventDefault();