title: @material-ui Autocomplete: set input value programmatically
body: <p>I have an asynchronous <code>Autocomplete</code> component that works fine so far.</p>
  <p>Hopefully the simplified code is understandable enough:</p>
  <pre><code>export function AsyncAutocomplete&lt;T&gt;(props: AsyncAutocompleteProps&lt;T&gt;) {
    const [open, setOpen] = useState(false);
  
    const [options, setOptions] = useState&lt;T[]&gt;();
    const onSearch = (search: string) =&gt; {
      fetchOptions(search).then(setOptions);
    };
  
    return (
      &lt;Autocomplete&lt;T&gt;
        open={open}
        onOpen={() =&gt; {
          setOpen(true);
        }}
        onClose={() =&gt; {
          setOpen(false);
        }}
        onChange={(event, value) =&gt; {
          props.onChange(value as T);
        }}
        getOptionSelected={props.getOptionSelected}
        getOptionLabel={props.getOptionLabel}
        options={options}
        value={(props.value as NonNullable&lt;T&gt;) || undefined}
        renderInput={(params) =&gt; (
          &lt;TextField
            {...params}
            onChange={(event) =&gt; onSearch(event.currentTarget.value)}
          /&gt;
        )}
      /&gt;
    );
  }
  </code></pre>
  <p>The component above works easily: when the user clicks on the input, the <code>Autocomplete</code> component displays an empty input field where the user can type in a value to search for. After the input has changed, the options are refetched to show matching results.</p>
  <p>Now I want to add support for shortcodes: when the user types <em>qq</em>, the search term should be replaced by <em>something</em>, just like if the user would have typed <em>something</em> himself.</p>
  <p>However, I found no way to update the value of the rendered <code>TextField</code> programmatically. Even if I set <code>value</code> directly on the <code>TextField</code>, it won't show my value but only the users input.</p>
  <p>So, any ideas how to solve this problem?</p>
  <p>Thank you very much.</p>
  <p>What I've tried so far was to simply update the input within <code>onKeyUp</code>:</p>
  <pre><code>  // ...
    renderInput={(params) =&gt; (
      &lt;TextInput
        {...params}
        label={props.label}
        onChange={(event) =&gt; onSearchChange(event.currentTarget.value)}
        InputProps={{
          ...params.InputProps,
          onKeyUp: (event) =&gt; {
            const value = event.currentTarget.value;
            if(value === 'qq') {
                event.currentTarget.value = 'something';
            }
          },
        }}
      /&gt;
    )}
  </code></pre>
  <p>With the code above I can see the <code>something</code> for a short time, but it gets replaced by the initial user input very soon.</p>