title: Material ui Autocomplete press enter to create new chips
body: <p>I wish I could do such a thing using Autocomplete of material ui: <a href="https://mui.wertarbyte.com/#chipinput" rel="noreferrer">wertarbyte</a></p>
  
  <p>That is, inserting text (string) without having a list of elements from which you must select.</p>
  
  <p>Therefore the noOptions message should not appear, every time the enter key is pressed on the keyboard the text is inserted.</p>
  
  <p><a href="https://i.stack.imgur.com/yhjQI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/yhjQI.png" alt="enter image description here"></a></p>
  
  <p>Link: <a href="https://codesandbox.io/s/material-demo-8c31j" rel="noreferrer">codesandbox</a></p>
  
  <p>Code:</p>
  
  <pre><code>import React from "react";
  import Chip from "@material-ui/core/Chip";
  import Autocomplete from "@material-ui/lab/Autocomplete";
  import { makeStyles } from "@material-ui/core/styles";
  import TextField from "@material-ui/core/TextField";
  
  const useStyles = makeStyles(theme =&gt; ({
    root: {
      width: 500,
      "&amp; &gt; * + *": {
        marginTop: theme.spacing(3)
      }
    }
  }));
  
  export default function Tags() {
    const classes = useStyles();
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;Autocomplete
          multiple
          id="tags-outlined"
          options={[]}
          defaultValue={["foo", "bar"]}
          //getOptionLabel={(option) =&gt; option}
          //defaultValue={[top100Films[13]]}
          //filterSelectedOptions
          renderInput={params =&gt; (
            &lt;TextField
              {...params}
              variant="outlined"
              label="filterSelectedOptions"
              placeholder="Favorites"
            /&gt;
          )}
        /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>