Introduce <FilterLiveForm>

packages/ra-core/src/controller/list/filter/AutoSubmitFilterForm.spec.tsx

@@ -0,0 +1,35 @@
+import { getFilterFormValues } from './AutoSubmitFilterForm';
+
+describe('<AutoSubmitFilterForm />', () => {
+    describe('getFilterFormValues', () => {
+        it('should correctly get the filter form values from the new filterValues', () => {
+            const currentFormValues = {
+                classicToClear: 'abc',
+                nestedToClear: { nestedValue: 'def' },
+                classicUpdated: 'ghi',
+                nestedUpdated: { nestedValue: 'jkl' },
+                nestedToSet: { nestedValue: undefined },
+                published_at: new Date('2022-01-01T03:00:00.000Z'),
+                clearedDateValue: null,
+            };
+            const newFilterValues = {
+                classicUpdated: 'ghi2',
+                nestedUpdated: { nestedValue: 'jkl2' },
+                nestedToSet: { nestedValue: 'mno2' },
+                published_at: '2022-01-01T03:00:00.000Z',
+            };
+
+            expect(
+                getFilterFormValues(currentFormValues, newFilterValues)
+            ).toEqual({
+                classicToClear: '',
+                nestedToClear: { nestedValue: '' },
+                classicUpdated: 'ghi2',
+                nestedUpdated: { nestedValue: 'jkl2' },
+                nestedToSet: { nestedValue: 'mno2' },
+                published_at: '2022-01-01T03:00:00.000Z',
+                clearedDateValue: '',
+            });
+        });
+    });
+});

packages/ra-core/src/controller/list/filter/AutoSubmitFilterForm.tsx

@@ -15,30 +15,37 @@ import {
     ValidateForm,
 } from '../../../form';
 import { useDebouncedEvent, useEvent } from '../../../util';
-import { useListFilterContext } from '../useListFilterContext';
+import { useListContext } from '../useListContext';
 
 /**
  * TODO
  */
 export const AutoSubmitFilterForm = (props: AutoSubmitFilterFormProps) => {
-    const { filterValues, setFilters } = useListFilterContext();
+    const { filterValues, setFilters } = useListContext();
     const resource = useResourceContext(props);
 
-    const { debounce = 500, resolver, validate, children, ...rest } = props;
+    const {
+        debounce = 500,
+        resolver,
+        validate,
+        children,
+        component: Component,
+        ...rest
+    } = props;
 
     const finalResolver = resolver
         ? resolver
         : validate
           ? getSimpleValidationResolver(validate)
           : undefined;
 
-    const form = useForm({
+    const formContext = useForm({
         mode: 'onChange',
         defaultValues: filterValues,
         resolver: finalResolver,
         ...rest,
     });
-    const { handleSubmit, getValues, reset, watch, formState } = form;
+    const { handleSubmit, getValues, reset, watch, formState } = formContext;
     const { isValid } = formState;
 
     // Ref tracking if there are internal changes pending, i.e. changes that
@@ -111,10 +118,18 @@ export const AutoSubmitFilterForm = (props: AutoSubmitFilterFormProps) => {
     );
 
     return (
-        <FormProvider {...form}>
+        <FormProvider {...formContext}>
             <FormGroupsProvider>
                 <SourceContextProvider value={sourceContext}>
-                    <form onSubmit={handleSubmit(onSubmit)}>{children}</form>
+                    {Component ? (
+                        <Component onSubmit={handleSubmit(onSubmit)}>
+                            {children}
+                        </Component>
+                    ) : (
+                        <form onSubmit={handleSubmit(onSubmit)}>
+                            {children}
+                        </form>
+                    )}
                 </SourceContextProvider>
             </FormGroupsProvider>
         </FormProvider>
@@ -127,6 +142,7 @@ export interface AutoSubmitFilterFormProps
     validate?: ValidateForm;
     debounce?: number | false;
     resource?: string;
+    component?: React.ComponentType<any>;
 }
 
 /**
@@ -136,7 +152,7 @@ export interface AutoSubmitFilterFormProps
  * and due to the dynamic nature of the filter form, we rebuild the filter form values from its current
  * values and make sure to pass at least an empty string for each input.
  */
-const getFilterFormValues = (
+export const getFilterFormValues = (
     formValues: Record<string, any>,
     filterValues: Record<string, any>
 ) => {

packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx

@@ -20,7 +20,7 @@ import {
     WithAutoCompleteArrayInput,
     WithComplexValueFilter,
 } from './FilterButton.stories';
-import { FilterForm, getFilterFormValues } from './FilterForm';
+import { FilterForm } from './FilterForm';
 
 describe('<FilterForm />', () => {
     const defaultListContext = {
@@ -125,11 +125,7 @@ describe('<FilterForm />', () => {
             target: { value: 'foo' },
         });
         await waitFor(() => {
-            expect(setFilters).toHaveBeenCalledWith(
-                { title: 'foo' },
-                { title: true },
-                true
-            );
+            expect(setFilters).toHaveBeenCalledWith({ title: 'foo' });
         });
     });
 
@@ -295,38 +291,6 @@ describe('<FilterForm />', () => {
         await screen.findByText('1-2 of 2');
     });
 
-    describe('getFilterFormValues', () => {
-        it('should correctly get the filter form values from the new filterValues', () => {
-            const currentFormValues = {
-                classicToClear: 'abc',
-                nestedToClear: { nestedValue: 'def' },
-                classicUpdated: 'ghi',
-                nestedUpdated: { nestedValue: 'jkl' },
-                nestedToSet: { nestedValue: undefined },
-                published_at: new Date('2022-01-01T03:00:00.000Z'),
-                clearedDateValue: null,
-            };
-            const newFilterValues = {
-                classicUpdated: 'ghi2',
-                nestedUpdated: { nestedValue: 'jkl2' },
-                nestedToSet: { nestedValue: 'mno2' },
-                published_at: '2022-01-01T03:00:00.000Z',
-            };
-
-            expect(
-                getFilterFormValues(currentFormValues, newFilterValues)
-            ).toEqual({
-                classicToClear: '',
-                nestedToClear: { nestedValue: '' },
-                classicUpdated: 'ghi2',
-                nestedUpdated: { nestedValue: 'jkl2' },
-                nestedToSet: { nestedValue: 'mno2' },
-                published_at: '2022-01-01T03:00:00.000Z',
-                clearedDateValue: '',
-            });
-        });
-    });
-
     it('should not reapply previous filter form values when clearing nested AutocompleteArrayInput', async () => {
         render(<WithAutoCompleteArrayInput />);