How to show NoOptionsText only with condition in MaterialUI Autocomplete

user_11245616 0
Viewed 2117

I have a Material UI autocomplete that selects its items based on the 3 letters you type, for example:

You want to fetch all the Pedros in your database, then you type "Ped" and it brings you only results that start with "Ped".

The problem is when I click in the auto complete it immediately shows the message "No options" like this picture

And I want it only to show after I typed 3 characters and it did not find any "Ped" in the database like:

enter image description here

I tried to put a condition inside the prop "noOptionsText" but it did not work. Does anyone know how to do it?

EDIT: Without using freeSolo, the option needs to be an object

material-ui reactjs autocomplete html javascript
1 Answers

Okay, I just found a way to answer my question.

There's the prop "open" in Material UI's Autocomplete. I just put a condition like:

open={lenght >= 3}

Then it only opens the options when I've typed the first 3 characters, otherwise it won't open. Plus, when I typed the 3 characters and there's no options, it will display the no options text.

user_112456160
Related