autoComplete=true has no effect on Autocomplete of MUI

Question

    <Autocomplete
      disablePortal
      autoComplete={true} // set to true
      id="combo-box-demo"
      options={top100Films}
      sx={{ width: 300 }}
      renderInput={(params) => <TextField {...params} label="Movie" />}
    />

runnable example:

https://codesandbox.io/s/h1sr5?file=/demo.js:185-407

It has not effect. It does not auto complete the word that is typed in.

What is wrong? How to fix?

Answer 1

autoComplete={true} does work (note: your example doesn't have it included, but I think that is not intentional), just not the way you'd expect (probably the MUI documentation could be improved on this point).

With autoComplete={true}, when navigation through the list of suggestions (using the arrow-down key), the selected item gets prefilled into the textbox:

With autoComplete={false}, you need to press Enter before the text gets filled in.