React Material ui Autocomplete - select 'first entry' on Enter click

Question

I have an autocomplete with options - which is an array of objects (Movies). My goal is when user types, e.g., he types "in" and then hits the Enter, that it selects first entry from the rendered list. In this case would be - 'Inception'. See screenshot. I found work around to select first entry by selecting first element from the rendered list. But I use createFilterOptions which makes it impossible.

Any suggestions?

https://codesandbox.io/s/material-demo-forked-cwcql?file=/demo.js

Answer 1

Add the autoHighlight={true} prop to the <Autocomplete> component.

https://material-ui.com/api/autocomplete/#main-content

https://codesandbox.io/s/material-demo-forked-dh9b3?file=/demo.js