diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx index 55589b5b70e..f4a5382e36e 100644 --- a/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx +++ b/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx @@ -92,7 +92,7 @@ describe('<FilterButton />', () => { ); }); - it('should remove all filters when the "Clear all filters" button is clicked', async () => { + it('should remove all filters when the "Remove all filters" button is clicked', async () => { render(<Basic />); // First, check we don't have a clear filters option yet @@ -125,6 +125,42 @@ describe('<FilterButton />', () => { }); }); + it('should remove all alwaysOn filters when the "Remove all filters" button is clicked', async () => { + render(<Basic />); + + // First, check we don't have a clear filters option yet + await screen.findByText('Add filter'); + fireEvent.click(screen.getByText('Add filter')); + + await screen.findByText('Title', { selector: 'li > span' }); + expect(screen.queryByDisplayValue('Remove all filters')).toBeNull(); + + // Then we apply a filter to an alwaysOn filter + fireEvent.change(screen.getByLabelText('Search'), { + target: { + value: + 'Accusantium qui nihil voluptatum quia voluptas maxime ab similique', + }, + }); + await screen.findByDisplayValue( + 'Accusantium qui nihil voluptatum quia voluptas maxime ab similique' + ); + + // Then we clear all filters + fireEvent.click(screen.getByText('Add filter')); + await screen.findByText('Remove all filters'); + fireEvent.click(screen.getByText('Remove all filters')); + + // We check that the previously applied filter has been removed + await waitFor(() => { + expect( + screen.queryByDisplayValue( + 'Accusantium qui nihil voluptatum quia voluptas maxime ab similique' + ) + ).toBeNull(); + }); + }); + it('should not display save query in filter button', async () => { const { queryByText } = render( <AdminContext theme={theme}> diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx index e7067339666..3d6552970c3 100644 --- a/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx +++ b/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx @@ -44,7 +44,6 @@ export const FilterButton = (props: FilterButtonProps): JSX.Element => { sort, } = useListContext(props); const hasFilterValues = !isEqual(filterValues, {}); - const hasDisplayedFilters = !isEqual(displayedFilters, {}); const validSavedQueries = extractValidSavedQueries(savedQueries); const hasSavedCurrentQuery = validSavedQueries.some(savedQuery => isEqual(savedQuery.value, { @@ -198,7 +197,7 @@ export const FilterButton = (props: FilterButtonProps): JSX.Element => { })} </MenuItem> )} - {hasDisplayedFilters && ( + {hasFilterValues && ( <MenuItem onClick={() => setFilters({}, {}, false)}> {translate('ra.action.remove_all_filters', { _: 'Remove all filters',