Merge pull request #3479 from marmelab/fix-autocomplete-array-input-f…

…ull-width

[RFR] Fix AutocompleteArrayInput options

docs/Inputs.md

@@ -297,11 +297,12 @@ Lastly, `<AutocompleteArrayInput>` renders a [material-ui-chip-input](https://gi
 {% raw %}
 ```jsx
 <AutocompleteArrayInput source="category" options={{
-    fullWidth: true,
+    fullWidthInput: true,
 }} />
 ```
 {% endraw %}
 
+**Tip**: Like many other inputs, `<AutocompleteArrayInput>` accept a `fullWidth` prop.
 **Tip**: If you want to populate the `choices` attribute with a list of related records, you should decorate `<AutocompleteArrayInput>` with [`<ReferenceArrayInput>`](#referenceinput), and leave the `choices` empty:
 
 ```jsx
@@ -341,6 +342,7 @@ If you need to override the props of the suggestions container (a `Popper` eleme
 | `setFilter` | Optional | `Function` | null | A callback to inform the `searchText` has changed and new `choices` can be retrieved based on this `searchText`. Signature `searchText => void`. This function is automatically setup when using `ReferenceInput`.  |
 | `suggestionComponent` | Optional | Function | `({ suggestion, query, isHighlighted, props }) => <div {...props} />` | Allows to override how the item is rendered.  |
 | `shouldRenderSuggestions` | Optional | Function | `() => true` | A function that returns a `boolean` to determine whether or not suggestions are rendered. Use this when working with large collections of data to improve performance and user experience. This function is passed into the underlying react-autosuggest component. Ex.`(value) => value.trim() > 2` |
+| `fullWith` | Optional | Boolean | If `true`, the input will take all the form width
 
 ## `<BooleanInput>` and `<NullableBooleanInput>`
 

examples/simple/src/posts/PostEdit.js

@@ -88,7 +88,7 @@ const PostEdit = props => (
                     source="tags"
                     filter={{ published: true }}
                 >
-                    <AutocompleteArrayInput />
+                    <AutocompleteArrayInput fullWidth />
                 </ReferenceArrayInput>
                 <ArrayInput source="backlinks">
                     <SimpleFormIterator>

packages/ra-ui-materialui/src/input/AutocompleteArrayInput.js

@@ -70,7 +70,7 @@ const styles = theme =>
  *    { id: 'M', name: 'Male' },
  *    { id: 'F', name: 'Female' },
  * ];
- * <AutocompleteInput source="gender" choices={choices} />
+ * <AutocompleteArrayInput source="gender" choices={choices} />
  *
  * You can also customize the properties to use for the option name and value,
  * thanks to the 'optionText' and 'optionValue' attributes.
@@ -79,7 +79,7 @@ const styles = theme =>
  *    { _id: 123, full_name: 'Leo Tolstoi', sex: 'M' },
  *    { _id: 456, full_name: 'Jane Austen', sex: 'F' },
  * ];
- * <AutocompleteInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
+ * <AutocompleteArrayInput source="author_id" choices={choices} optionText="full_name" optionValue="_id" />
  *
  * `optionText` also accepts a function, so you can shape the option text at will:
  * @example
@@ -88,7 +88,7 @@ const styles = theme =>
  *    { id: 456, first_name: 'Jane', last_name: 'Austen' },
  * ];
  * const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
- * <AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
+ * <AutocompleteArrayInput source="author_id" choices={choices} optionText={optionRenderer} />
  *
  * The choices are translated by default, so you can use translation identifiers as choices:
  * @example
@@ -100,12 +100,12 @@ const styles = theme =>
  * However, in some cases (e.g. inside a `<ReferenceInput>`), you may not want
  * the choice to be translated. In that case, set the `translateChoice` prop to false.
  * @example
- * <AutocompleteInput source="gender" choices={choices} translateChoice={false}/>
+ * <AutocompleteArrayInput source="gender" choices={choices} translateChoice={false}/>
  *
  * The object passed as `options` props is passed to the material-ui <AutoComplete> component
  *
  * @example
- * <AutocompleteInput source="author_id" options={{ fullWidth: true }} />
+ * <AutocompleteArrayInput source="author_id" options={{ fullWidthInput: true }} />
  */
 export class AutocompleteArrayInput extends React.Component {
     initialInputValue = [];
@@ -215,7 +215,11 @@ export class AutocompleteArrayInput extends React.Component {
     };
 
     renderInput = inputProps => {
-        const { input } = this.props;
+        const {
+            input,
+            fullWidth,
+            options: { InputProps, suggestionsContainerProps, ...options },
+        } = this.props;
         const {
             autoFocus,
             className,
@@ -228,7 +232,6 @@ export class AutocompleteArrayInput extends React.Component {
             source,
             value,
             ref,
-            options: { InputProps, suggestionsContainerProps, ...options },
             ...other
         } = inputProps;
         if (typeof meta === 'undefined') {
@@ -247,6 +250,11 @@ export class AutocompleteArrayInput extends React.Component {
             ref(input);
         };
 
+        const finalOptions = {
+            fullWidth,
+            ...options,
+        };
+
         return (
             <AutocompleteArrayInputChip
                 clearInputValueOnChange
@@ -267,7 +275,7 @@ export class AutocompleteArrayInput extends React.Component {
                     />
                 }
                 {...other}
-                {...options}
+                {...finalOptions}
             />
         );
     };

packages/ra-ui-materialui/src/input/ReferenceArrayInput.js

@@ -105,6 +105,7 @@ export const ReferenceArrayInputView = ({
         translateChoice: false,
         limitChoicesToValue: true,
         ...sanitizeRestProps(rest),
+        ...children.props,
     });
 };