Merge pull request #8800 from marmelab/Fix-FilterForm-infinite-loop

Fix FilterForm infinite loop when used in a ReferenceManyField
marmelab · Apr 4, 2023 · 40f288b · 40f288b
2 parents 2e81138 + 236b77a
commit 40f288b
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 13 deletions.
diff --git a/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts b/packages/ra-core/src/controller/field/useReferenceManyFieldController.ts
@@ -1,5 +1,5 @@
-import get from 'lodash/get';
 import { useCallback, useEffect, useRef } from 'react';
+import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
 
 import { useSafeSetState, removeEmpty } from '../../util';

diff --git a/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx b/packages/ra-ui-materialui/src/field/ReferenceManyField.stories.tsx
@@ -12,6 +12,8 @@ import { TextField } from '../field';
 import { ReferenceManyField } from './ReferenceManyField';
 import { Datagrid } from '../list/datagrid/Datagrid';
 import { Notification } from '../layout/Notification';
+import { FilterForm } from '../list';
+import { TextInput } from '../input';
 
 export default { title: 'ra-ui-materialui/fields/ReferenceManyField' };
 
@@ -26,7 +28,15 @@ let books = [
 
 const defaultDataProvider = {
     getManyReference: (resource, params) => {
-        const result = books.filter(book => book.author_id === params.id);
+        const result = books
+            .filter(book => book.author_id === params.id)
+            .filter(book =>
+                params?.filter?.q
+                    ? book.title
+                          .toLowerCase()
+                          .includes(params.filter.q.toLowerCase())
+                    : true
+            );
         return Promise.resolve({
             data: result,
             total: result.length,
@@ -67,3 +77,16 @@ export const Basic = () => (
         </ReferenceManyField>
     </Wrapper>
 );
+
+export const WithFilter = () => (
+    <Wrapper>
+        <ReferenceManyField reference="books" target="author_id">
+            <FilterForm
+                filters={[<TextInput source="q" label="Search" alwaysOn />]}
+            />
+            <Datagrid bulkActionButtons={false}>
+                <TextField source="title" />
+            </Datagrid>
+        </ReferenceManyField>
+    </Wrapper>
+);
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx
@@ -20,10 +20,11 @@ import {
     useForm,
     useFormContext,
 } from 'react-hook-form';
-import lodashSet from 'lodash/set';
-import lodashUnset from 'lodash/unset';
-import lodashGet from 'lodash/get';
+import set from 'lodash/set';
+import unset from 'lodash/unset';
+import get from 'lodash/get';
 import cloneDeep from 'lodash/cloneDeep';
+import isEqual from 'lodash/isEqual';
 
 import { FilterFormInput } from './FilterFormInput';
 import { FilterContext } from '../FilterContext';
@@ -48,7 +49,9 @@ export const FilterForm = (props: FilterFormProps) => {
     // Reapply filterValues when the URL changes or a user removes a filter
     useEffect(() => {
         const newValues = getFilterFormValues(form.getValues(), filterValues);
-        form.reset(newValues);
+        if (!isEqual(newValues, form.getValues())) {
+            form.reset(newValues);
+        }
     }, [filterValues, form]);
 
     useEffect(() => {
@@ -58,9 +61,9 @@ export const FilterForm = (props: FilterFormProps) => {
             const isFormValid = await form.trigger();
 
             if (isFormValid) {
-                if (lodashGet(values, name) === '') {
+                if (get(values, name) === '') {
                     const newValues = cloneDeep(values);
-                    lodashUnset(newValues, name);
+                    unset(newValues, name);
                     setFilters(newValues, displayedFilters);
                 } else {
                     setFilters(values, displayedFilters);
@@ -104,7 +107,7 @@ export const FilterFormBase = (props: FilterFormBaseProps) => {
     const getShownFilters = () => {
         const values = form.getValues();
         return filters.filter((filterElement: JSX.Element) => {
-            const filterValue = lodashGet(values, filterElement.props.source);
+            const filterValue = get(values, filterElement.props.source);
             return (
                 filterElement.props.alwaysOn ||
                 displayedFilters[filterElement.props.source] ||
@@ -185,7 +188,7 @@ export const mergeInitialValuesWithDefaultValues = (
         )
         .reduce(
             (acc, filterElement: JSX.Element) =>
-                lodashSet(
+                set(
                     { ...acc },
                     filterElement.props.source,
                     filterElement.props.defaultValue
@@ -250,10 +253,10 @@ const getInputValue = (
         return '';
     }
     if (Array.isArray(formValues[key])) {
-        return lodashGet(filterValues, key, '');
+        return get(filterValues, key, '');
     }
     if (formValues[key] instanceof Date) {
-        return lodashGet(filterValues, key, '');
+        return get(filterValues, key, '');
     }
     if (typeof formValues[key] === 'object') {
         const inputValues = Object.keys(formValues[key]).reduce(
@@ -274,5 +277,5 @@ const getInputValue = (
         if (!Object.keys(inputValues).length) return '';
         return inputValues;
     }
-    return lodashGet(filterValues, key, '');
+    return get(filterValues, key, '');
 };