diff --git a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.spec.tsx
index b4a69130da8..3ee204fd214 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.spec.tsx
+++ b/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();
+ 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();
+ 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();
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx
index 31c3c1d8ba7..519f3618443 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.stories.tsx
+++ b/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 = () => (
);
+
+const countryFilters = [];
+export const WithFilterButton = () => (
+
+
+
+
+
+
+
+
+
+
+);
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.tsx b/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.tsx
index 53eab17f38d..e1cceccb3c9 100644
--- a/packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.tsx
+++ b/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();