Merge pull request #4096 from marmelab/fix-autocomplete-fullwidth

Fix fullWidth support on AutoCompleteInput
marmelab · Dec 2, 2019 · 3141cc8 · 3141cc8
2 parents dcf1d6e + 66bc3be
commit 3141cc8
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/docs/Inputs.md b/docs/Inputs.md
@@ -181,12 +181,12 @@ If you want to limit the initial choices shown to the current value only, you ca
 When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain usable performance. The `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly, and might be all you need (depending on your data set).
 Ex. `<AutocompleteInput shouldRenderSuggestions={(val) => { return val.trim().length > 2 }} />` would not render any suggestions until the 3rd character was entered. This prop is passed to the underlying `react-autosuggest` component and is documented [here](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
 
-`<AutocompleteInput>` renders a material-ui `<TextField>` component. Use the `options` attribute to override any of the `<TextField>` attributes:
+`<AutocompleteInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
 ```jsx
 <AutocompleteInput source="category" options={{
-    fullWidth: true,
+    color: 'secondary',
 }} />
 ```
 {% endraw %}
@@ -285,12 +285,12 @@ However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want the
 When dealing with a large amount of `choices` you may need to limit the number of suggestions that are rendered in order to maintain usable performance. The `shouldRenderSuggestions` is an optional prop that allows you to set conditions on when to render suggestions. An easy way to improve performance would be to skip rendering until the user has entered 2 or 3 characters in the search box. This lowers the result set significantly, and might be all you need (depending on your data set).
 Ex. `<AutocompleteArrayInput shouldRenderSuggestions={(val) => { return val.trim().length > 2 }} />` would not render any suggestions until the 3rd character was entered. This prop is passed to the underlying `react-autosuggest` component and is documented [here](https://github.com/moroshko/react-autosuggest#should-render-suggestions-prop).
 
-Lastly, `<AutocompleteArrayInput>` renders a [material-ui-chip-input](https://github.com/TeamWertarbyte/material-ui-chip-input) component. Use the `options` attribute to override any of the `<ChipInput>` attributes:
+Lastly, `<AutocompleteArrayInput>` renders a [material-ui `<TextField>` component](https://material-ui.com/api/text-field/). Use the `options` attribute to override any of the `<TextField>` attributes:
 
 {% raw %}
 ```jsx
 <AutocompleteArrayInput source="category" options={{
-    fullWidthInput: true,
+    color: 'secondary',
 }} />
 ```
 {% endraw %}

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteArrayInput.tsx
@@ -85,10 +85,10 @@ interface Options {
  * @example
  * <AutocompleteArrayInput source="gender" choices={choices} translateChoice={false}/>
  *
- * The object passed as `options` props is passed to the material-ui <AutoComplete> component
+ * The object passed as `options` props is passed to the material-ui <TextField> component
  *
  * @example
- * <AutocompleteArrayInput source="author_id" options={{ fullWidthInput: true }} />
+ * <AutocompleteArrayInput source="author_id" options={{ color: 'secondary' }} />
  */
 const AutocompleteArrayInput: FunctionComponent<
     InputProps<TextFieldProps & Options> & DownshiftProps<any>
@@ -99,6 +99,7 @@ const AutocompleteArrayInput: FunctionComponent<
     emptyText,
     emptyValue,
     format,
+    fullWidth,
     helperText,
     id: idOverride,
     input: inputOverride,
@@ -358,7 +359,7 @@ const AutocompleteArrayInput: FunctionComponent<
                     <div className={classes.container}>
                         <TextField
                             id={id}
-                            fullWidth
+                            fullWidth={fullWidth}
                             InputProps={{
                                 inputRef: storeInputRef,
                                 classes: {

diff --git a/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx b/packages/ra-ui-materialui/src/input/AutocompleteInput.tsx
@@ -85,10 +85,10 @@ interface Options {
  * @example
  * <AutocompleteInput source="gender" choices={choices} translateChoice={false}/>
  *
- * The object passed as `options` props is passed to the material-ui <AutoComplete> component
+ * The object passed as `options` props is passed to the material-ui <TextField> component
  *
  * @example
- * <AutocompleteInput source="author_id" options={{ fullWidthInput: true }} />
+ * <AutocompleteInput source="author_id" options={{ color: 'secondary', InputLabelProps: { shrink: true } }} />
  */
 const AutocompleteInput: FunctionComponent<
     InputProps<TextFieldProps & Options> & DownshiftProps<any>
@@ -100,6 +100,7 @@ const AutocompleteInput: FunctionComponent<
     emptyText,
     emptyValue,
     format,
+    fullWidth,
     helperText,
     id: idOverride,
     input: inputOverride,
@@ -371,6 +372,7 @@ const AutocompleteInput: FunctionComponent<
                             }
                             variant={variant}
                             margin={margin}
+                            fullWidth={fullWidth}
                             value={filterValue}
                             className={className}
                             {...inputProps}