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.
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?
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.
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