Autocomplete with custom input in material ui not working

Question

I am able to use the autocomplete by selecting values from the list. Now I want to add a new value in the selection. I tried multiple options including onChange but couldn't implement.

enter image description here

If user types in something and clicks outside the textbox it should convert freetext into a tag. Also, allow user to continue adding more tags from the predefined list/free text.

I am trying out the options here but to no luck. Is this even possible or do I need to look for other options?

Answer 1

In order to add new items with the Autocomplete you should use the freeSolo property of the Autocomplete. This feature gives you an option to automatically use the value from the input and add it into the value of the Autocomplete.

The issue that you have with the freeSolo is when you have complex objects (and not just strings).

There are multiple ways to solve this.

Option #1 - If the complex objects are only the pre-existing values, you can use this in order to display the correct values:

<Autocomplete
 freeSolo
 getOptionLabel={option => option.title || option}
 ...
/>

If you don't have option.title (which is the case for the default freeSolo because the value is just the text, and not an object) - just show the option.
You can find here a working example: https://codesandbox.io/s/mui-autocomplete-create-complex-4mk5v?file=/demo.js

Option #2 - if you do need complex objects:

You will need to manage adding/removing the objects by yourself.

The onChange prop of the Autocomplete gets a function that you can use for this.

• Ishan: Thanks Dekel, what this does is just allows free text input, it doesn't convert it into a tag like the first 2 in my question. I don't know which object to set the value when user is done by entering free text. Like if, user types in something and clicks outside the textbox it, should convert freetext into a tag. Also, allow user to continue adding more tags from the predefined list.
• Dekel: Your question is really not focused, so it's really hard to help. You should either explain exactly what you need (for example - the clicking outside of the textbox was not part of your original question), give an example of how you expect something to work, or ask different questions (on different topics).
• Dekel: Regardless my previous comment - for "auto create" tags when user moves out of your textbox - you can use the autoSelect prop of the Autocomplete.
• Ishan: I totally understand your frustration. Sometimes you feel like you have asked what you need but then realize you missed the point. The same happened here. But I'm glad you guided me to the solution! Marked as answered. Thank you.

Answer 2

freeSolo allows you to type freely but it does not allow you to register the value as an option ( https://material-ui.com/api/autocomplete/ look for "autoselect" ). Here's the solution:

<Autocomplete
 options={options}
 freeSolo
 autoSelect