Material-ui: [Autocomplete] Add Helper Text Prop to Autocomplete

[afuller611-animas]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

The Autocomplete component solves a lot of problems with searchable multi-selects, but there is no way to add helper text before the listed items. Autocomplete should have a prop to add a component before the options are listed.

Examples 🌈

For example, In several cases we may want to limit the amount of selections, in which case we would like to add dynamic helper text to help the user understand that. I've used a normal multi-select to demonstrate this.

https://codesandbox.io/s/zealous-blackburn-mvmzf

The helper text is merely a div that changes to red once three choices are selected.

Motivation 🔦

Autocompletes are powerful but can become very complex. Yet we want any user to understand how to use them.

I'd imagine we could implement something along the lines of

<Autocomplete options={options} helperNode={<div style={{color: "red"}}>Helper Text</div>} />

so that these Autocompletes can be more versatile and user friendly.

[oliviertassinari]

You can use the PopperComponent or the ListboxComponent prop to solve this problem. Let us know if it's enough.

[x5engine]

this is very important and should have at least an example in the docs or a codesandbox demo to it @oliviertassinari thanks