Merge pull request #4500 from marmelab/allow-empty-in-filterforminput

Add support for allowEmpty=false in Filter Inputs
marmelab · Mar 10, 2020 · 6487594 · 6487594
2 parents 586a4b7 + e6a89fe
commit 6487594
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 8 deletions.
diff --git a/packages/ra-ui-materialui/src/input/ReferenceArrayInput.js b/packages/ra-ui-materialui/src/input/ReferenceArrayInput.js
@@ -139,7 +139,7 @@ const ReferenceArrayInput = ({
 };
 
 ReferenceArrayInput.propTypes = {
-    allowEmpty: PropTypes.bool.isRequired,
+    allowEmpty: PropTypes.bool,
     basePath: PropTypes.string,
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
@@ -157,7 +157,6 @@ ReferenceArrayInput.propTypes = {
 };
 
 ReferenceArrayInput.defaultProps = {
-    allowEmpty: false,
     filter: {},
     filterToQuery: searchText => (searchText ? { q: searchText } : {}),
     perPage: 25,

diff --git a/packages/ra-ui-materialui/src/input/ReferenceInput.tsx b/packages/ra-ui-materialui/src/input/ReferenceInput.tsx
@@ -138,7 +138,7 @@ const ReferenceInput: FunctionComponent<Props & InputProps> = ({
 };
 
 ReferenceInput.propTypes = {
-    allowEmpty: PropTypes.bool.isRequired,
+    allowEmpty: PropTypes.bool,
     basePath: PropTypes.string,
     children: PropTypes.element.isRequired,
     className: PropTypes.string,
@@ -159,7 +159,6 @@ ReferenceInput.propTypes = {
 };
 
 ReferenceInput.defaultProps = {
-    allowEmpty: false,
     filter: {},
     filterToQuery: searchText => (searchText ? { q: searchText } : {}),
     perPage: 25,

diff --git a/packages/ra-ui-materialui/src/input/SelectInput.tsx b/packages/ra-ui-materialui/src/input/SelectInput.tsx
@@ -258,7 +258,7 @@ const SelectInput: FunctionComponent<
 };
 
 SelectInput.propTypes = {
-    allowEmpty: PropTypes.bool.isRequired,
+    allowEmpty: PropTypes.bool,
     emptyText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     emptyValue: PropTypes.any,
     choices: PropTypes.arrayOf(PropTypes.object),
@@ -279,7 +279,6 @@ SelectInput.propTypes = {
 };
 
 SelectInput.defaultProps = {
-    allowEmpty: false,
     emptyText: '',
     emptyValue: '',
     options: {},

diff --git a/packages/ra-ui-materialui/src/list/FilterForm.spec.js b/packages/ra-ui-materialui/src/list/FilterForm.spec.js
@@ -1,10 +1,11 @@
 import expect from 'expect';
-import { cleanup } from '@testing-library/react';
+import { cleanup, fireEvent } from '@testing-library/react';
 import React from 'react';
 import { renderWithRedux } from 'ra-core';
 
 import FilterForm, { mergeInitialValuesWithDefaultValues } from './FilterForm';
 import TextInput from '../input/TextInput';
+import SelectInput from '../input/SelectInput';
 
 describe('<FilterForm />', () => {
     const defaultProps = {
@@ -38,6 +39,92 @@ describe('<FilterForm />', () => {
         cleanup();
     });
 
+    describe('allowEmpty', () => {
+        it('should keep allowEmpty true if undefined', () => {
+            const filters = [
+                <SelectInput
+                    label="SelectWithUndefinedAllowEmpty"
+                    choices={[{ title: 'yes', id: 1 }, { title: 'no', id: 0 }]}
+                    source="test"
+                    optionText="title"
+                />,
+            ];
+            const displayedFilters = {
+                test: true,
+            };
+
+            const { queryAllByRole, queryByLabelText } = renderWithRedux(
+                <FilterForm
+                    {...defaultProps}
+                    filters={filters}
+                    displayedFilters={displayedFilters}
+                />
+            );
+
+            const select = queryByLabelText('SelectWithUndefinedAllowEmpty');
+            fireEvent.mouseDown(select);
+            const options = queryAllByRole('option');
+            expect(options.length).toEqual(3);
+            cleanup();
+        });
+
+        it('should keep allowEmpty false', () => {
+            const filters = [
+                <SelectInput
+                    label="SelectWithFalseAllowEmpty"
+                    allowEmpty={false}
+                    choices={[{ title: 'yes', id: 1 }, { title: 'no', id: 0 }]}
+                    source="test"
+                    optionText="title"
+                />,
+            ];
+            const displayedFilters = {
+                test: true,
+            };
+
+            const { queryAllByRole, queryByLabelText } = renderWithRedux(
+                <FilterForm
+                    {...defaultProps}
+                    filters={filters}
+                    displayedFilters={displayedFilters}
+                />
+            );
+            const select = queryByLabelText('SelectWithFalseAllowEmpty');
+            fireEvent.mouseDown(select);
+            const options = queryAllByRole('option');
+            expect(options.length).toEqual(2);
+            cleanup();
+        });
+
+        it('should keep allowEmpty true', () => {
+            const filters = [
+                <SelectInput
+                    label="SelectWithTrueAllowEmpty"
+                    allowEmpty={true}
+                    choices={[{ title: 'yes', id: 1 }, { title: 'no', id: 0 }]}
+                    source="test"
+                    optionText="title"
+                />,
+            ];
+            const displayedFilters = {
+                test: true,
+            };
+
+            const { queryAllByRole, queryByLabelText } = renderWithRedux(
+                <FilterForm
+                    {...defaultProps}
+                    filters={filters}
+                    displayedFilters={displayedFilters}
+                />
+            );
+            const select = queryByLabelText('SelectWithTrueAllowEmpty');
+            fireEvent.mouseDown(select);
+            const options = queryAllByRole('option');
+            expect(options.length).toEqual(3);
+            cleanup();
+        });
+    });
+
     describe('mergeInitialValuesWithDefaultValues', () => {
         it('should correctly merge initial values with the default values of the alwayson filters', () => {
             const initialValues = {

diff --git a/packages/ra-ui-materialui/src/list/FilterFormInput.js b/packages/ra-ui-materialui/src/list/FilterFormInput.js
@@ -43,7 +43,10 @@ const FilterFormInput = ({
                 </IconButton>
             )}
             {React.cloneElement(filterElement, {
-                allowEmpty: true,
+                allowEmpty:
+                    filterElement.props.allowEmpty === undefined
+                        ? true
+                        : filterElement.props.allowEmpty,
                 resource,
                 record: emptyRecord,
                 variant,