Merge pull request #7691 from marmelab/fix-filterbutton-alwayson

Fix `<Filter>` shows filter button even though there is no filter to add
marmelab · May 16, 2022 · 384de3c · 384de3c
2 parents 81fff52 + 2f9a7b6
commit 384de3c
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.spec.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import expect from 'expect';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, screen } from '@testing-library/react';
 import { createTheme } from '@mui/material/styles';
 
 import { AdminContext } from '../../AdminContext';
@@ -44,6 +44,49 @@ describe('<FilterButton />', () => {
             expect(queryByText('Name')).toBeNull();
         });
 
+        it('should not display the filter button if all filters are shown and there is no filter value', () => {
+            render(
+                <AdminContext theme={theme}>
+                    <FilterButton
+                        {...defaultProps}
+                        filters={[
+                            <TextInput source="title" label="Title" />,
+                            <TextInput source="customer.name" label="Name" />,
+                        ]}
+                        displayedFilters={{
+                            title: true,
+                            'customer.name': true,
+                        }}
+                    />
+                </AdminContext>
+            );
+            expect(screen.queryByLabelText('ra.action.add_filter')).toBeNull();
+        });
+
+        it('should display the filter button if all filters are shown and there is a filter value', () => {
+            render(
+                <AdminContext theme={theme}>
+                    <FilterButton
+                        {...defaultProps}
+                        filters={[
+                            <TextInput source="title" label="Title" />,
+                            <TextInput source="customer.name" label="Name" />,
+                        ]}
+                        displayedFilters={{
+                            title: true,
+                            'customer.name': true,
+                        }}
+                        filterValues={{ title: 'foo' }}
+                    />
+                </AdminContext>
+            );
+            expect(
+                screen.queryByLabelText('ra.action.add_filter')
+            ).not.toBeNull();
+            fireEvent.click(screen.getByLabelText('ra.action.add_filter'));
+            screen.getByText('ra.saved_queries.new_label');
+        });
+
         it('should return disabled filter menu item when "disabled" passed to filter', () => {
             const hiddenFilter = (
                 <TextInput source="Returned" label="Returned" disabled={true} />

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.tsx
@@ -109,6 +109,9 @@ export const FilterButton = (props: FilterButtonProps): JSX.Element => {
         setRemoveSavedQueryDialogOpen(true);
     };
 
+    if (hiddenFilters.length === 0 && !hasFilterValues) {
+        return null;
+    }
     return (
         <Root className={className} {...sanitizeRestProps(rest)}>
             <Button