Merge pull request #3634 from marmelab/fix-list-filters

[RFR] Fix Adding a Filter Override Displayed Filters
marmelab · Sep 2, 2019 · 8b44287 · 8b44287
2 parents d46d24f + f4d1523
commit 8b44287
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git a/packages/ra-core/src/controller/useListController.spec.tsx b/packages/ra-core/src/controller/useListController.spec.tsx
@@ -190,6 +190,60 @@ describe('useListController', () => {
             cleanup();
         });
     });
+    describe('showFilter', () => {
+        it('Does not remove previously shown filter when adding a new one', () => {
+            let currentDisplayedFilters;
+
+            let fakeComponent = ({ showFilter, displayedFilters }) => {
+                currentDisplayedFilters = displayedFilters;
+                return (
+                    <>
+                        <button
+                            aria-label="Show filter 1"
+                            onClick={() => {
+                                showFilter('filter1', '');
+                            }}
+                        />
+                        <button
+                            aria-label="Show filter 2"
+                            onClick={() => {
+                                showFilter('filter2', '');
+                            }}
+                        />
+                    </>
+                );
+            };
+
+            const props = {
+                ...defaultProps,
+                children: fakeComponent,
+            };
+
+            const { getByLabelText } = renderWithRedux(
+                <ListController {...props} />,
+                {
+                    admin: {
+                        resources: {
+                            posts: {
+                                list: {
+                                    params: { filter: { q: 'hello' } },
+                                },
+                            },
+                        },
+                    },
+                }
+            );
+
+            fireEvent.click(getByLabelText('Show filter 1'));
+            expect(currentDisplayedFilters).toEqual({ filter1: true });
+            fireEvent.click(getByLabelText('Show filter 2'));
+            expect(currentDisplayedFilters).toEqual({
+                filter1: true,
+                filter2: true,
+            });
+        });
+    });
+
     describe('getListControllerProps', () => {
         it('should only pick the props injected by the ListController', () => {
             expect(

diff --git a/packages/ra-core/src/controller/useListParams.ts b/packages/ra-core/src/controller/useListParams.ts
@@ -183,13 +183,19 @@ const useListParams = ({
     );
 
     const hideFilter = useCallback((filterName: string) => {
-        setDisplayedFilters({ [filterName]: false });
+        setDisplayedFilters(previousFilters => ({
+            ...previousFilters,
+            [filterName]: false,
+        }));
         const newFilters = removeKey(filterValues, filterName);
         setFilters(newFilters);
     }, requestSignature); // eslint-disable-line react-hooks/exhaustive-deps
 
     const showFilter = useCallback((filterName: string, defaultValue: any) => {
-        setDisplayedFilters({ [filterName]: true });
+        setDisplayedFilters(previousFilters => ({
+            ...previousFilters,
+            [filterName]: true,
+        }));
         if (typeof defaultValue !== 'undefined') {
             setFilters({
                 ...filterValues,