[docs][material-ui][Autocomplete] Hint demo is broken

[stealthco-tony]

Related page

https://mui.com/material-ui/react-autocomplete/

Kind of issue

Broken demo

Issue description

I think this content is broken/outdated. Please review and update.

• the "matchingOption" variable is constantly empty
• the dropdown does not show the selected option after clicking on it
• clicking "ENTER" on the keyboard over a selected option does not select it
• There is no default value for the value prop in the Autocomplete component

Additional features to add:

1. Show the difference of a displayedValue vs storedValue (like in a <select> element)
2. Show how this would work with an inboundValue (URL querystring param). So imagine the page was loaded with a URL parameter specifying which option should be shown by default. Right now with your code, it will hide ALL the other options and not allow deleting/removing.

Context

Here is what I need my Autocomplete to do:

1. Store the component as a separate file.
2. Accept inbound parameters: data (the array of options), defaultValue (the default option to show onload, may be null), onChangeFunc, a function from a parent component to call onChange
3. Set the selectedValue to the inbound displayed/stored value (defaultValue and its associated label from the data array) if exists
4. Create the autocomplete as per the "Hint" demo
5. Allow for typing and filtering the displayed list. If the user selects a new option, pass the value (not inputValue) to the onChangeFunc
6. If the user starts to delete characters (even after starting with a default Value/inputValue), show all the others in the data array.

Thank you!

Search keywords: autocomplete

[ZeeshanTamboli]

It's a regression since the demo creation in #37496. @sai6855 Can you take a look? PR: #42990

[ZeeshanTamboli]

We have fixed the demo in #42990. For the additional features you mentioned, you need to customize your custom Autocomplete component. We can't support all such things in our Autocomplete.