Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[AutoComplete] Pressing enter on single filtering result should select the option #7403

Closed
grzegorzlademan opened this issue Jul 11, 2017 · 3 comments
Labels
component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@grzegorzlademan
Copy link

We are using AutoComplete with filtering for selecting options from hundreds of items. But when we specify filter and only one option is visible in suggestions, pressing enter should allow to select it (trigger onNewRequest with this item). Now user have to use keydown to select option and then press enter to select the option. It is a little annoying, especially that using keydown with AutoComplete and openOnFocus is problematic as described in #4922

I know that it can break some functionality with selecting values not listed. But connecting this feature with #5494 can give a great user experience.

Link to minimal working code that reproduces the issue

http://www.material-ui.com/#/components/auto-complete

  • example: 'Type 'peah', fuzzy search'
  • type 'peac' - only one option should be visible
  • press Enter - option 'Peach' should be selected

Versions

  • Material-UI: 0.18.4
  • React: 15.4.2
  • Browser: Chrome, IE
@oliviertassinari
Copy link
Member

Closed by #4783

@RmStorm
Copy link

RmStorm commented Apr 29, 2020

For people that come across this issue. The way to achieve this behaviour in the current version of autocomplete is to set the autoHighlight prop to true this will autoHighlight the first entry in the drop down list and allow you to select it using enter.

@oliviertassinari oliviertassinari added component: autocomplete This is the name of the generic UI component, not the React module! and removed component: Autocomplete legacy labels Apr 29, 2020
@adi518
Copy link

adi518 commented Apr 7, 2022

Using autoHighlight seems to improve the situation, but doesn't fix it since you can still escape the list and hit enter, which changes the value with the reason "createOption", which I don't understand because it's letting me create an option I already have, which is a catalyst for bugs, since it's easy to get the duplicate tag error (multiple autocomplete) this way.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: autocomplete This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

4 participants