Customizing the Material-UI Autocomplete Component

Do you want to build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and never again fear styling any MUI component?!? Do you want an active Q&A with me?!? Then check out my Udemy course! (Currently I have an active COUPON!!!):
www.udemy.com/course/advanced...
Link to code for this video and additional images: smartdevpreneur.com/customizi...
The Autocomplete component may have the most customization options of any MUI component I’ve seen. Unfortunately, I found that custom styling the Popper and using the renderOption prop were challenging despite the existing examples. Therefore, I created this demo that fetches data from a Star Wars API and populates this custom styled Autocomplete component.

[@noslenac]

Awesome video. Thanks for putting that together!

[@aldairvillarruel4946]

It's a amazing video!!! Can you help me with how to use a delay when i get the options on the autocomplete?

[@noejafet5264]

Why when I implement an infinite scroll and the component makes the request the response is added but the Autocomplete goes ever to the first option? This is weird 'cause the user has to scroll again to the bottom to watch the recently added options

[@jamesdaniels6134]

Thanks for the vid - great work!
One thing that isn't obvious to me. What's the point in doing both getOptionLabel and renderOption. I can't work out what the difference is?

[@thecleverdev5315]

Hi Jimmy.
getOptionLabel provides the syntax for searching (i.e. being able to use search both name and manufacturer).
renderOption controls how the text is rendered in each row of the dropdown (i.e. rendering both name and manufacterer). renderOption will default to the value given to getOptionLabel when not otherwise specified.
Read more and see the code in depth here:
smartdevpreneur.com/customizing-the-material-ui-autocomplete-component/#The_Autocomplete_component

[@soltiscd]

Love it. Subscribed ✔

[@adhithyans3989]

Can I reuse Autocomplete component for any other data.

[@kilokalas2773]

Amazing, thank you 😊

[@ahmedmohamed-fy2jc]

what shoud i do if the data return after typing on it

[@lalitkandpal1483]

can you show me how to style the scroll bar in autocomplete

[@majidshah48]

how to set default value ?

[@ChandraSekharUppalapati]

Hi thanks for the video how do you style the default value which is already selected

[@thecleverdev5315]

You probably need to style the component you passed into the renderInput prop. You can read more about that here: smartdevpreneur.com/how-to-style-the-material-ui-autocomplete-component/

[@aritrakoley7776]

Is there a way to fix the max height of the Input component so that it doesn't grow taller when multiple options are selected?

[@thecleverdev5315]

Hi Aritra, that is an odd default behavior. Try targeting the .MuiOutlinedInput-root class with a nested selector and setting height that way.

[@hacinisouleymanboumedyen3881]

Thank you

[@LazAustin]

Man I'm embarrassed how much time I spent on this component yesterday.

[@thecleverdev5315]

lol don't feel bad. I made these videos because even though MUI is great, understanding the styling and props can be a challenge.

[@shotgun600]

Thank you