Fix Autocomplete selection display with custom Component

docs/Inputs.md

@@ -162,6 +162,28 @@ const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
 <AutocompleteInput source="author_id" choices={choices} optionText={optionRenderer} />
 ```
 
+`optionText` also accepts a custom Component. If you do so, you will have to set the inputText function wich determine the input text filter of the current selection:
+
+```jsx
+const choices = [
+   { id: 123, first_name: 'Leo', last_name: 'Tolstoi' avatar='/pengouin' },
+   { id: 456, first_name: 'Jane', last_name: 'Austen' avatar='/panda' },
+];
+const OptionRenderer = choice => (
+    <span>
+        <img src={choice.avatar}>
+        {choice.first_name} {choice.last_name}
+    </span>
+);
+const inputText = choice => `${choice.first_name} ${choice.last_name}`;
+<AutocompleteInput
+    source="author_id"
+    choices={choices}
+    optionText={<OptionRenderer />}
+    inputText={inputText}
+/>
+```
+
 The choices are translated by default, so you can use translation identifiers as choices:
 
 ```jsx
@@ -225,8 +247,9 @@ Lastly, would you need to override the props of the suggestions container (a `Po
 | `emptyValue` | Optional | anything | `''` | The value to use for the empty element |
 | `emptyText` | Optional | `string` | `''` | The text to use for the empty element |
 | `matchSuggestion` | Optional | `Function` | - | Required if `optionText` is a React element. Function returning a boolean indicating whether a choice matches the filter. `(filter, choice) => boolean`
-| `optionText` | Optional | <code>string &#124; Function</code> | `name` | Fieldname of record to display in the suggestion item or function which accepts the correct record as argument (`(record)=> {string}`) |
+| `optionText` | Optional | <code>string &#124; Function &#124; Component</code> | `name` | Fieldname of record to display in the suggestion item or function which accepts the correct record as argument (`(record)=> {string}`) |
 | `optionValue` | Optional | `string` | `id` | Fieldname of record containing the value to use as input value  |
+| `inputText` | Optional | <code>Function</code> | `-` | If `optionText` is a custom Component, This function is needed to determine the text displayed filter of the current selection. In Autocomplete, the current selection have to be an editable string and can not be a Component  (`(record)=> {string}`) |
 | `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`.  |
 | `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` |
 

examples/simple/src/comments/CommentEdit.js

@@ -33,6 +33,14 @@ const useEditStyles = makeStyles({
     },
 });
 
+const OptionRenderer = ({ record }) => (
+    <span>
+        {record.title}-{record.id}
+    </span>
+);
+
+const inputText = record => `${record.title}-${record.id}`;
+
 const CommentEdit = props => {
     const classes = useEditStyles();
     const {
@@ -74,10 +82,15 @@ const CommentEdit = props => {
                             fullWidth
                         >
                             <AutocompleteInput
-                                optionText="title"
+                                matchSuggestion={(filterValue, suggestion) =>
+                                    true
+                                }
+                                optionText={<OptionRenderer />}
+                                inputText={inputText}
                                 options={{ fullWidth: true }}
                             />
                         </ReferenceInput>
+
                         <LinkToRelatedPost />
                         <TextInput
                             source="author.name"

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -124,6 +124,7 @@ const AutocompleteInput: FunctionComponent<
         InputProps: undefined,
     },
     optionText = 'name',
+    inputText,
     optionValue = 'id',
     parse,
     resource,
@@ -219,8 +220,20 @@ const AutocompleteInput: FunctionComponent<
 
         // If we have a value, set the filter to its text so that
         // Downshift displays it correctly
-        setFilterValue(input.value ? getChoiceText(selectedItem) : '');
-    }, [input.value, handleFilterChange, selectedItem, getChoiceText]);
+        setFilterValue(
+            input.value
+                ? inputText
+                    ? inputText(getChoiceText(selectedItem).props.record)
+                    : getChoiceText(selectedItem)
+                : ''
+        );
+    }, [
+        input.value,
+        handleFilterChange,
+        selectedItem,
+        getChoiceText,
+        inputText,
+    ]);
 
     const handleChange = useCallback(
         (item: any) => {
@@ -267,10 +280,16 @@ const AutocompleteInput: FunctionComponent<
             handleFilterChange('');
             // If we had a value before, set the filter back to its text so that
             // Downshift displays it correctly
-            setFilterValue(input.value ? getChoiceText(selectedItem) : '');
+            setFilterValue(
+                input.value
+                    ? inputText
+                        ? inputText(getChoiceText(selectedItem).props.record)
+                        : getChoiceText(selectedItem)
+                    : ''
+            );
             input.onBlur(event);
         },
-        [getChoiceText, handleFilterChange, input, selectedItem]
+        [getChoiceText, handleFilterChange, input, inputText, selectedItem]
     );
 
     const handleFocus = useCallback(