[SOLVED] Material UI Autocomplete accept custom values

Material UI Autocomplete accept custom values

I have this autocomplete drop down box.

If I select values other than in the drop down, how do i accept the autocomplete drop down box to take in the custom value. In this example, bar and bat values are in drop down.

How do i accept bag to be accepted as input value?

my code is at : https://codesandbox.io/s/material-demo-8scos

export default function ComboBox() {
    return (
    <Autocomplete
        id="combo-box-demo"
       options={top100Films}
       getOptionLabel={option => option.title}
       style={{ width: 300 }}
       renderInput={params => (
           <TextField {...params} label="Combo box" variant="outlined" />
       )}
    />
  );
}

const top100Films = [
  { title: "bar", year: 1994 },
  { title: "bat", year: 1972 }
];

https://codesandbox.io/s/material-demo-ytrt4

Solution