I have a Material UI autoplete 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 plete it immediately shows the message "No options" like

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

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

I have a Material UI autoplete 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 plete it immediately shows the message "No options" like

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

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

• javascript
• html
• reactjs
• autoplete
• material-ui

Share Improve this question Follow edited Mar 24, 2020 at 15:22 keikai 15.2k1010 gold badges5555 silver badges7272 bronze badges asked Mar 24, 2020 at 14:17 Pedro W. BotelhoPedro W. Botelho 28411 gold badge44 silver badges1414 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

There's the prop "open" in Material UI's Autoplete. 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.