Merge pull request #10657 from marmelab/fix-FilterLiveForm-RHF-7.55.0

Fix `<FilterLiveForm>` compatibility with react-hook-form 7.55.0

Author: djhi

packages/ra-core/src/form/FilterLiveForm.spec.tsx

@@ -9,6 +9,7 @@ import {
     PerInputValidation,
 } from './FilterLiveForm.stories';
 import React from 'react';
+import { WithFilterListSection } from '../../../ra-ui-materialui/src/list/filter/FilterLiveForm.stories';
 
 describe('<FilterLiveForm />', () => {
     it('should allow to set a filter value', async () => {
@@ -138,6 +139,30 @@ describe('<FilterLiveForm />', () => {
         ).toBeNull();
     });
 
+    it('should not reapply old filter values when they change externally', async () => {
+        render(<WithFilterListSection />);
+        // Click on Yes
+        fireEvent.click(await screen.findByText('Yes'));
+        await screen.findByText('"has_newsletter": true', { exact: false });
+        await new Promise(resolve => setTimeout(resolve, 510));
+        await screen.findByText('"has_newsletter": true', { exact: false });
+        // Click on No
+        fireEvent.click(await screen.findByText('No'));
+        await screen.findByText('"has_newsletter": false', { exact: false });
+        await new Promise(resolve => setTimeout(resolve, 510));
+        await screen.findByText('"has_newsletter": false', { exact: false });
+        // Click on Yes
+        fireEvent.click(await screen.findByText('Yes'));
+        await screen.findByText('"has_newsletter": true', { exact: false });
+        await new Promise(resolve => setTimeout(resolve, 510));
+        await screen.findByText('"has_newsletter": true', { exact: false });
+        // Click on No
+        fireEvent.click(await screen.findByText('No'));
+        await screen.findByText('"has_newsletter": false', { exact: false });
+        await new Promise(resolve => setTimeout(resolve, 510));
+        await screen.findByText('"has_newsletter": false', { exact: false });
+    });
+
     describe('getFilterFormValues', () => {
         it('should correctly get the filter form values from the new filterValues', () => {
             const currentFormValues = {
@@ -154,6 +179,7 @@ describe('<FilterLiveForm />', () => {
                 nestedUpdated: { nestedValue: 'jkl2' },
                 nestedToSet: { nestedValue: 'mno2' },
                 published_at: '2022-01-01T03:00:00.000Z',
+                newIgnoredValue: 'pqr',
             };
 
             expect(

packages/ra-core/src/form/FilterLiveForm.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import get from 'lodash/get';
+import mergeWith from 'lodash/mergeWith';
 import set from 'lodash/set';
 import { ReactNode, useEffect } from 'react';
 import { FormProvider, useForm, UseFormProps } from 'react-hook-form';
@@ -110,10 +111,7 @@ export const FilterLiveForm = (props: FilterLiveFormProps) => {
             return;
         }
         formChangesPending.current = true;
-        setFilters({
-            ...filterValues,
-            ...values,
-        });
+        setFilters(mergeObjNotArray(filterValues, values));
     };
     const debouncedOnSubmit = useDebouncedEvent(onSubmit, debounce || 0);
 
@@ -172,6 +170,16 @@ export interface FilterLiveFormProps
     >;
 }
 
+// Lodash merge customizer to merge objects but not arrays
+const mergeCustomizer = (objValue: any, srcValue: any) => {
+    if (Array.isArray(srcValue)) {
+        return srcValue;
+    }
+};
+
+const mergeObjNotArray = (a: any, b: any) =>
+    mergeWith(cloneDeep(a), b, mergeCustomizer);
+
 /**
  * Because we are using controlled inputs with react-hook-form, we must provide a default value
  * for each input when resetting the form. (see https://react-hook-form.com/docs/useform/reset).
@@ -183,13 +191,10 @@ export const getFilterFormValues = (
     formValues: Record<string, any>,
     filterValues: Record<string, any>
 ) => {
-    return Object.keys(formValues).reduce(
-        (acc, key) => {
-            acc[key] = getInputValue(formValues, key, filterValues);
-            return acc;
-        },
-        cloneDeep(filterValues) ?? {}
-    );
+    return Object.keys(formValues).reduce((acc, key) => {
+        acc[key] = getInputValue(formValues, key, filterValues);
+        return acc;
+    }, {});
 };
 
 const getInputValue = (