Merge pull request #8693 from marmelab/SearchInput-size

Fix `FilterFormInput` should not override its children's size if they provide one explicitely
marmelab · Mar 10, 2023 · 6ee8d71 · 6ee8d71
2 parents 6cf793f + 8bbc263
commit 6ee8d71
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx b/packages/ra-ui-materialui/src/list/filter/FilterButton.stories.tsx
@@ -11,6 +11,7 @@ import {
     TextField,
     TextInput,
     TopToolbar,
+    SearchInput,
 } from 'react-admin';
 import fakerestDataProvider from 'ra-data-fakerest';
 
@@ -23,6 +24,12 @@ export default {
                 options: [false, true],
             },
         },
+        size: {
+            control: {
+                type: 'select',
+                options: [undefined, 'small', 'medium'],
+            },
+        },
     },
 };
 
@@ -221,3 +228,34 @@ export const DisabledFilters = (args: { disableSaveQuery?: boolean }) => {
         </Admin>
     );
 };
+
+export const WithSearchInput = (args: {
+    disableSaveQuery?: boolean;
+    size?: 'small' | 'medium';
+}) => {
+    const postFilters: React.ReactElement[] = [
+        <SearchInput source="q" alwaysOn size={args.size} />,
+        <TextInput
+            label="Title"
+            source="title"
+            defaultValue="Accusantium qui nihil voluptatum quia voluptas maxime ab similique"
+            size={args.size}
+        />,
+        <TextInput
+            label="Nested"
+            source="nested"
+            defaultValue={{ foo: 'bar' }}
+            format={v => v?.foo || ''}
+            parse={v => ({ foo: v })}
+            size={args.size}
+        />,
+    ];
+    return (
+        <Admin dataProvider={fakerestDataProvider(data)}>
+            <Resource
+                name="posts"
+                list={<PostList postFilters={postFilters} args={args} />}
+            />
+        </Admin>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx b/packages/ra-ui-materialui/src/list/filter/FilterFormInput.tsx
@@ -33,7 +33,7 @@ export const FilterFormInput = props => {
             {React.cloneElement(filterElement, {
                 resource,
                 record: emptyRecord,
-                size: 'small',
+                size: filterElement.props.size ?? 'small',
                 helperText: false,
                 // ignore defaultValue in Field because it was already set in Form (via mergedInitialValuesWithDefaultValues)
                 defaultValue: undefined,