Fix Autocomplete selection display with custom Component

[JulienMattiussi]

Closes #4281

Issue

When an autocomplete use a custom Component as optionText, The selected value can't be display in the filter TextField.

Solution

When you want to pass a custom component as optionText to an Autocomplete,
you also have to pass a text rendering function returning the filter text to be displayed for your custom component
This inputText function must return a string which can be similary to the displayed component, or totally different

const OptionRenderer = ({ record }) => (
    <span>
        {record.title}-{record.id}
    </span>
);

const inputText = record => `${record.title}-${record.id}`;

<AutocompleteInput
   matchSuggestion={(filterValue, suggestion) => true}
   optionText={<OptionRenderer />}
   inputText={inputText}
   options={{ fullWidth: true }}
/>

Preview

Documentation

[fzaninotto]

Please target next rather than master for this one

[fzaninotto]

Could you add a check for the existence of an inputText prop if the optionText is a component, and throw an explicit error if it's not the case?