CODEWITHSUNDEEP
reactjsautocompletematerial-ui
Mykyta
Mykyta

Reputation: 366

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

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

enter image description here

Upvotes: 8

Views: 7764

Answers (1)

wrxsti
wrxsti

Reputation: 3504

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

Upvotes: 18

Related Questions