Merge pull request #3274 from donatascn/hotfix/disappearing-nested-fi…

…lter-loc-change fix filter condition to work with nested object paths
marmelab · Jun 5, 2019 · b90d5d0 · b90d5d0
2 parents a13b7d9 + fdff494
commit b90d5d0
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 5 deletions.
diff --git a/packages/ra-ui-materialui/src/list/FilterButton.js b/packages/ra-ui-materialui/src/list/FilterButton.js
@@ -7,6 +7,7 @@ import ContentFilter from '@material-ui/icons/FilterList';
 import classnames from 'classnames';
 import compose from 'recompose/compose';
 import { translate } from 'ra-core';
+import lodashGet from 'lodash/get';
 
 import FilterButtonMenuItem from './FilterButtonMenuItem';
 import Button from '../button/Button';
@@ -32,7 +33,7 @@ export class FilterButton extends Component {
             filterElement =>
                 !filterElement.props.alwaysOn &&
                 !displayedFilters[filterElement.props.source] &&
-                !filterValues[filterElement.props.source]
+                typeof lodashGet(filterValues, filterElement.props.source) === 'undefined'
         );
     }
 

diff --git a/packages/ra-ui-materialui/src/list/FilterButton.spec.js b/packages/ra-ui-materialui/src/list/FilterButton.spec.js
@@ -0,0 +1,53 @@
+import React from 'react';
+import expect from 'expect';
+import { render, cleanup, fireEvent } from 'react-testing-library';
+
+import { FilterButton } from './FilterButton';
+import TextInput from '../input/TextInput';
+
+describe('<FilterButton />', () => {
+    const defaultProps = {
+        resource: 'post',
+        filters: [
+            <TextInput source="title" label="Title" />,
+            <TextInput source="customer.name" label="Name" />,
+        ],
+        displayedFilters: { 
+            title: true,
+            "customer.name": true,
+        },
+        showFilter: () => {},
+        translate: () => {},
+        filterValues: {},
+    };
+
+    afterEach(cleanup);
+
+    describe('filter button', () => {
+        it('should not be rendered, if all filters are already being displayed', () => {
+            const { queryByText } = render(
+                <FilterButton
+                    {...defaultProps}
+                />
+            );
+            expect(queryByText('ra.action.add_filter')).toBeNull();
+        });
+
+    });
+
+    describe('filter selection menu', () => {
+        it('should display only hidden filters', () => {
+            const hiddenFilter = <TextInput source="Returned" label="Returned" />;
+            const { queryByText } = render(
+                <FilterButton
+                    {...defaultProps}
+                    filters={defaultProps.filters.concat(hiddenFilter)}
+                />
+            );
+            fireEvent.click(queryByText('ra.action.add_filter'));
+
+            expect(queryByText('Returned')).not.toBeNull();
+            expect(queryByText('Name')).toBeNull();
+        });
+    });
+});
diff --git a/packages/ra-ui-materialui/src/list/FilterForm.js b/packages/ra-ui-materialui/src/list/FilterForm.js
@@ -6,6 +6,7 @@ import { withStyles, createStyles } from '@material-ui/core/styles';
 import compose from 'recompose/compose';
 import withProps from 'recompose/withProps';
 import lodashSet from 'lodash/set';
+import lodashGet from 'lodash/get';
 
 import FilterFormInput from './FilterFormInput';
 
@@ -82,7 +83,7 @@ export class FilterForm extends Component {
             filterElement =>
                 filterElement.props.alwaysOn ||
                 displayedFilters[filterElement.props.source] ||
-                typeof initialValues[filterElement.props.source] !== 'undefined'
+                typeof lodashGet(initialValues, filterElement.props.source) !== 'undefined'
         );
     }
 

diff --git a/packages/ra-ui-materialui/src/list/FilterForm.spec.js b/packages/ra-ui-materialui/src/list/FilterForm.spec.js
@@ -24,8 +24,14 @@ describe('<FilterForm />', () => {
     });
 
     it('should display correctly passed filters', () => {
-        const filters = [<TextInput source="title" label="Title" />]; // eslint-disable-line react/jsx-key
-        const displayedFilters = { title: true };
+        const filters = [
+            <TextInput source="title" label="Title" />,
+            <TextInput source="customer.name" label="Name" />
+        ]; // eslint-disable-line react/jsx-key
+        const displayedFilters = { 
+            title: true,
+            "customer.name": true,
+         };
 
         const muiTheme = createMuiTheme({ userAgent: false });
         const wrapper = render(
@@ -43,7 +49,7 @@ describe('<FilterForm />', () => {
         );
 
         const titleFilter = wrapper.find('input[type="text"]');
-        assert.equal(titleFilter.length, 1);
+        assert.equal(titleFilter.length, 2);
     });
 
     describe('mergeInitialValuesWithDefaultValues', () => {