[Autocomplete][docs] Playground Examples are... too similar?

[AlbinoGeek]

Duplicates

• I have searched the existing issues

Related page

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

Kind of issue

Unclear explanations

Issue description

While exploring the Autocomplete component's documentation, I noticed the playground playground section (https://mui.com/material-ui/react-autocomplete/#playground) doesn't seem to adequately demonstrate the differences between the various properties.

Most of the examples, irrespective of the selected properties, appear functionally identical. This makes it challenging to discern the unique behaviors and benefits of each property just from the playground.

I typed "as" in every one of the fields, and the same list of options was presented, even with the "includeInputInList" examples, which I would have expected to add "as" into the options list; did not appear to do anything differently from the others.

Context 🔦

No response

[michaldudak]

Thanks for your feedback. We feel the need to overhaul Autocomplete docs as well.
cc @samuelsycamore

[oliviertassinari]

@AlbinoGeek How does this one feel in comparison https://mui.com/joy-ui/react-autocomplete/#introduction?

For me, this is a perfect use case for a playground with buttons to click, it's all about behavior, so you will need to click on stuff anyway, and plus, it explains what each prop is about. The only thing missing (and important) is to see the source.

[AlbinoGeek]

@AlbinoGeek How does this one feel in comparison https://mui.com/joy-ui/react-autocomplete/#introduction?

For me, this is a perfect use case for a playground with buttons to click, it's all about behavior, so you will need to click on stuff anyway, and plus, it explains what each prop is about. The only thing missing (and important) is to see the source.

I think the playground is a wonderful approach, and would ease the learning curve for new users of the framework.

However, it seems as if some of the options are either wrong or counter to the default behavior. For example, if you select nothing, and use the auto complete as is, select on focus at least as it is described, happens whether or not it is checked.

There are a few other things, but it is hard to test on mobile. And if that matters, I'm on mobile for this message.