Merge pull request #9588 from Dreamsorcerer/patch-1

Use elem.key from filter elements
marmelab · Feb 16, 2024 · ff7b95b · ff7b95b
2 parents df6d698 + e4e4b62
commit ff7b95b
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.spec.tsx
@@ -56,6 +56,38 @@ describe('<FilterForm />', () => {
         expect(screen.queryAllByLabelText('Name')).toHaveLength(1);
     });
 
+    it('should retain key values in the form inputs', () => {
+        // As key is not rendered, we just test that the React warning doesn't occur.
+        const origError = console.error;
+        console.error = message => {
+            throw new Error(message);
+        };
+
+        const setFilters = jest.fn();
+        const filters = [
+            <TextInput source="title" label="Title" key="custom-key" />,
+            <TextInput source="title" label="Title2" key="another-key" />,
+        ];
+        const displayedFilters = {
+            title: true,
+            title2: true,
+        };
+
+        expect(() => {
+            render(
+                <AdminContext>
+                    <FilterForm
+                        {...defaultProps}
+                        setFilters={setFilters}
+                        filters={filters}
+                        displayedFilters={displayedFilters}
+                    />
+                </AdminContext>
+            );
+        }).not.toThrow();
+        console.error = origError;
+    });
+
     it('should change the filter when the user updates an input', async () => {
         const filters = [<TextInput source="title" label="Title" />];
         const displayedFilters = {

diff --git a/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx b/packages/ra-ui-materialui/src/list/filter/FilterForm.tsx
@@ -145,7 +145,7 @@ export const FilterFormBase = (props: FilterFormBaseProps) => {
             >
                 {getShownFilters().map((filterElement: JSX.Element) => (
                     <FilterFormInput
-                        key={filterElement.props.source}
+                        key={filterElement.key || filterElement.props.source}
                         filterElement={filterElement}
                         handleHide={handleHide}
                         resource={resource}