Modifiable size prop for SelectArrayInput

marmelab · Mar 11, 2023 · 6b2845c · 6b2845c
1 parent cbcb745
commit 6b2845c
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 1 deletion.
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.stories.tsx
@@ -149,3 +149,50 @@ export const DifferentIdTypes = () => {
         </AdminContext>
     );
 };
+
+export const DifferentSizes = () => {
+    const fakeData = {
+        bands: [{ id: 1, name: 'band_1', members: [1, '2'] }],
+        artists: [
+            { id: 1, name: 'artist_1' },
+            { id: 2, name: 'artist_2' },
+            { id: 3, name: 'artist_3' },
+        ],
+    };
+    const dataProvider = fakeRestProvider(fakeData, false);
+    return (
+        <AdminContext dataProvider={dataProvider}>
+            <Edit resource="bands" id={1} sx={{ width: 600 }}>
+                <SimpleForm>
+                    <TextInput source="name" fullWidth />
+                    <SelectArrayInput
+                        fullWidth
+                        source="members"
+                        choices={fakeData.artists}
+                        size="small"
+                    />
+                    <SelectArrayInput
+                        fullWidth
+                        source="members"
+                        choices={fakeData.artists}
+                        size="medium"
+                    />
+                    <SelectArrayInput
+                        fullWidth
+                        source="members"
+                        choices={fakeData.artists}
+                        size="small"
+                        variant="outlined"
+                    />
+                    <SelectArrayInput
+                        fullWidth
+                        source="members"
+                        choices={fakeData.artists}
+                        size="medium"
+                        variant="outlined"
+                    />
+                </SimpleForm>
+            </Edit>
+        </AdminContext>
+    );
+};
diff --git a/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx b/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx
@@ -11,6 +11,7 @@ import {
     FormHelperText,
     FormControl,
     Chip,
+    OutlinedInput,
 } from '@mui/material';
 import {
     ChoicesProps,
@@ -108,6 +109,7 @@ export const SelectArrayInput = (props: SelectArrayInputProps) => {
         optionValue,
         parse,
         resource: resourceProp,
+        size = 'small',
         source: sourceProp,
         translateChoice,
         validate,
@@ -254,6 +256,25 @@ export const SelectArrayInput = (props: SelectArrayInputProps) => {
         ? [field.value]
         : [];
 
+    const outlinedInputProps =
+        variant === 'outlined'
+            ? {
+                  input: (
+                      <OutlinedInput
+                          id="select-multiple-chip"
+                          label={
+                              <FieldTitle
+                                  label={label}
+                                  source={source}
+                                  resource={resource}
+                                  isRequired={isRequired}
+                              />
+                          }
+                      />
+                  ),
+              }
+            : {};
+
     return (
         <>
             <StyledFormControl
@@ -307,11 +328,12 @@ export const SelectArrayInput = (props: SelectArrayInputProps) => {
                         </div>
                     )}
                     data-testid="selectArray"
-                    size="small"
+                    size={size}
                     {...field}
                     {...options}
                     onChange={handleChangeWithCreateSupport}
                     value={finalValue}
+                    {...outlinedInputProps}
                 >
                     {finalChoices.map(renderMenuItem)}
                 </Select>