Merge pull request #9521 from marmelab/filter-array-input

Fix `<ArrayInput>` does not work in `<FilterForm>`
marmelab · Dec 13, 2023 · 7effb1a · 7effb1a
2 parents b5b030c + 74105b2
commit 7effb1a
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 40 deletions.
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ListBase } from 'ra-core';
+import { ListBase, memoryStore } from 'ra-core';
 import {
     Admin,
     Resource,
@@ -14,7 +14,12 @@ import {
     SearchInput,
 } from 'react-admin';
 import fakerestDataProvider from 'ra-data-fakerest';
-import { AutocompleteArrayInput } from '../../input';
+import {
+    ArrayInput,
+    AutocompleteArrayInput,
+    SimpleFormIterator,
+} from '../../input';
+import { MemoryRouter } from 'react-router';
 
 export default {
     title: 'ra-ui-materialui/list/filter/FilterButton',
@@ -197,12 +202,43 @@ export const Basic = (args: { disableSaveQuery?: boolean }) => {
         <TextInput label="Nested" source="nested.foo" defaultValue="bar" />,
     ];
     return (
-        <Admin dataProvider={fakerestDataProvider(data)}>
-            <Resource
-                name="posts"
-                list={<PostList postFilters={postFilters} args={args} />}
-            />
-        </Admin>
+        <MemoryRouter>
+            <Admin
+                dataProvider={fakerestDataProvider(data)}
+                store={memoryStore()}
+            >
+                <Resource
+                    name="posts"
+                    list={<PostList postFilters={postFilters} args={args} />}
+                />
+            </Admin>
+        </MemoryRouter>
+    );
+};
+
+export const WithArrayInput = (args: { disableSaveQuery?: boolean }) => {
+    const postFilters: React.ReactElement[] = [
+        <ArrayInput source="title" label="Title include" alwaysOn>
+            <SimpleFormIterator disableReordering>
+                <TextInput source="" label="Title" helperText={false} />
+            </SimpleFormIterator>
+        </ArrayInput>,
+    ];
+    return (
+        <MemoryRouter>
+            <Admin
+                dataProvider={fakerestDataProvider(
+                    data,
+                    process.env.NODE_ENV !== 'test'
+                )}
+                store={memoryStore()}
+            >
+                <Resource
+                    name="posts"
+                    list={<PostList postFilters={postFilters} args={args} />}
+                />
+            </Admin>
+        </MemoryRouter>
     );
 };
 
@@ -211,12 +247,17 @@ export const DisabledFilters = (args: { disableSaveQuery?: boolean }) => {
         <TextInput label="Title" source="title" disabled={true} />,
     ];
     return (
-        <Admin dataProvider={fakerestDataProvider(data)}>
-            <Resource
-                name="posts"
-                list={<PostList postFilters={postFilters} args={args} />}
-            />
-        </Admin>
+        <MemoryRouter>
+            <Admin
+                dataProvider={fakerestDataProvider(data)}
+                store={memoryStore()}
+            >
+                <Resource
+                    name="posts"
+                    list={<PostList postFilters={postFilters} args={args} />}
+                />
+            </Admin>
+        </MemoryRouter>
     );
 };
 
@@ -242,12 +283,17 @@ export const WithSearchInput = (args: {
         />,
     ];
     return (
-        <Admin dataProvider={fakerestDataProvider(data)}>
-            <Resource
-                name="posts"
-                list={<PostList postFilters={postFilters} args={args} />}
-            />
-        </Admin>
+        <MemoryRouter>
+            <Admin
+                dataProvider={fakerestDataProvider(data)}
+                store={memoryStore()}
+            >
+                <Resource
+                    name="posts"
+                    list={<PostList postFilters={postFilters} args={args} />}
+                />
+            </Admin>
+        </MemoryRouter>
     );
 };
 
@@ -307,19 +353,22 @@ export const WithAutoCompleteArrayInput = (args: {
         />,
     ];
     return (
-        <Admin
-            dataProvider={withNestedFiltersSupportDataProvider()}
-            dashboard={Dashboard}
-        >
-            <Resource
-                name="posts"
-                list={
-                    <PostList
-                        postFilters={postFilters}
-                        args={{ disableSaveQuery: args.disableSaveQuery }}
-                    />
-                }
-            />
-        </Admin>
+        <MemoryRouter>
+            <Admin
+                dataProvider={withNestedFiltersSupportDataProvider()}
+                dashboard={Dashboard}
+                store={memoryStore()}
+            >
+                <Resource
+                    name="posts"
+                    list={
+                        <PostList
+                            postFilters={postFilters}
+                            args={{ disableSaveQuery: args.disableSaveQuery }}
+                        />
+                    }
+                />
+            </Admin>
+        </MemoryRouter>
     );
 };
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx
@@ -11,7 +11,11 @@ import * as React from 'react';
 import { AdminContext } from '../../AdminContext';
 import { ReferenceInput, SelectInput, TextInput } from '../../input';
 import { Filter } from './Filter';
-import { Basic, WithAutoCompleteArrayInput } from './FilterButton.stories';
+import {
+    Basic,
+    WithAutoCompleteArrayInput,
+    WithArrayInput,
+} from './FilterButton.stories';
 import {
     FilterForm,
     getFilterFormValues,
@@ -194,6 +198,25 @@ describe('<FilterForm />', () => {
         expect(screen.queryByLabelText('Nested')).toBeNull();
     });
 
+    it('should provide a FormGroupContext', async () => {
+        render(<WithArrayInput />);
+
+        fireEvent.click(await screen.findByLabelText('Add'));
+        fireEvent.change((await screen.findAllByLabelText('Title'))[0], {
+            target: { value: 'Sint dignissimos in architecto aut' },
+        });
+        fireEvent.click(await screen.findByLabelText('Add'));
+
+        await waitFor(() => {
+            expect(screen.getAllByText('Title')).toHaveLength(3);
+        });
+        fireEvent.change((await screen.findAllByLabelText('Title'))[1], {
+            target: { value: 'Sed quo et et fugiat modi' },
+        });
+
+        await screen.findByText('1-2 of 2');
+    });
+
     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/filter/FilterForm.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx
@@ -9,6 +9,7 @@ import {
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import {
+    FormGroupsProvider,
     LabelPrefixContextProvider,
     ListFilterContextValue,
     useListContext,
@@ -84,11 +85,13 @@ export const FilterForm = (props: FilterFormProps) => {
 
     return (
         <FormProvider {...form}>
-            <FilterFormBase
-                onSubmit={handleFormSubmit}
-                filters={filters}
-                {...rest}
-            />
+            <FormGroupsProvider>
+                <FilterFormBase
+                    onSubmit={handleFormSubmit}
+                    filters={filters}
+                    {...rest}
+                />
+            </FormGroupsProvider>
         </FormProvider>
     );
 };