Merge pull request #6339 from marmelab/filter-form-invalid-no-fetch

Fix Filter calls getList on change even when input is invalid
marmelab · Jun 8, 2021 · 279e74b · 279e74b
2 parents a68a2af + c4da75f
commit 279e74b
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 3 deletions.
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx
@@ -2,6 +2,7 @@ import expect from 'expect';
 import { fireEvent } from '@testing-library/react';
 import * as React from 'react';
 import { renderWithRedux } from 'ra-test';
+import { minLength } from 'ra-core';
 
 import FilterForm, { mergeInitialValuesWithDefaultValues } from './FilterForm';
 import TextInput from '../../input/TextInput';
@@ -38,6 +39,54 @@ describe('<FilterForm />', () => {
         expect(queryAllByLabelText('Name')).toHaveLength(1);
     });
 
+    it('should change the filter when the user updates an input', () => {
+        const filters = [<TextInput source="title" label="Title" />];
+        const displayedFilters = {
+            title: true,
+        };
+        const setFilters = jest.fn();
+
+        const { queryByLabelText } = renderWithRedux(
+            <FilterForm
+                {...defaultProps}
+                filters={filters}
+                displayedFilters={displayedFilters}
+                setFilters={setFilters}
+            />
+        );
+        fireEvent.change(queryByLabelText('Title'), {
+            target: { value: 'foo' },
+        });
+        expect(setFilters).toHaveBeenCalledWith({ title: 'foo' });
+    });
+
+    it('should not change the filter when the user updates an input with an invalid value', () => {
+        const filters = [
+            <TextInput
+                source="title"
+                label="Title"
+                validate={[minLength(5)]}
+            />,
+        ];
+        const displayedFilters = {
+            title: true,
+        };
+        const setFilters = jest.fn();
+
+        const { queryByLabelText } = renderWithRedux(
+            <FilterForm
+                {...defaultProps}
+                filters={filters}
+                displayedFilters={displayedFilters}
+                setFilters={setFilters}
+            />
+        );
+        fireEvent.change(queryByLabelText('Title'), {
+            target: { value: 'foo' },
+        });
+        expect(setFilters).not.toHaveBeenCalled();
+    });
+
     describe('allowEmpty', () => {
         it('should keep allowEmpty true if undefined', () => {
             const filters = [

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx
@@ -186,8 +186,8 @@ const EnhancedFilterForm = props => {
                 <>
                     <FormSpy
                         subscription={FormSpySubscription}
-                        onChange={({ pristine, values }) => {
-                            if (pristine) {
+                        onChange={({ pristine, values, invalid }) => {
+                            if (pristine || invalid) {
                                 return;
                             }
                             rest && rest.setFilters(values);
@@ -203,6 +203,6 @@ const EnhancedFilterForm = props => {
 const handleFinalFormSubmit = () => {};
 
 // Options to instruct the FormSpy that it should only listen to the values and pristine changes
-const FormSpySubscription = { values: true, pristine: true };
+const FormSpySubscription = { values: true, pristine: true, invalid: true };
 
 export default EnhancedFilterForm;