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] freeSolo value always changes to first matching item when you modify previous match #27137

Open
2 tasks done
mbyrne00 opened this issue Jul 6, 2021 · 3 comments
Labels
bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module!

Comments

@mbyrne00
Copy link

mbyrne00 commented Jul 6, 2021

Autocomplete will not update value for freeSolo if you delete text from a previous match and hit enter. Instead the select always interprets the enter key as selecting the first option.

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Select menu takes over and selects first item on enter instead of accepting the custom freeSolo text after modification. Hitting esc on the keyboard to force menu shut is the only way to make it work without further modification.

Expected Behavior 🤔

Expect that hitting enter with custom text changes the value to that text when freeSolo option is enabled.

Steps to Reproduce 🕹

Forked off the demo material-ui freeSolo example. Only changes being that value shown and second example removed.
https://codesandbox.io/s/material-demo-forked-w902w

  1. Enter "Shawshank", arrow down and select the matching "The Shawshank Redemption" option. The value will be shown below
  2. Use your keyboard to remove "The" from the start of the word and hit enter
  3. BUG: Value changes back to "The Shawshank Redemption" and the value below shows "The Shawshank Redemption" instead of the desired updated value "Shawshank Redemption" (being freeSolo)
  4. Now remove the word "Shawshank" and hit enter and the value changes to "The Redemption"
  5. Now using keyboard, delete "The" and type "Shawshank" at the start (keeping space between words) and hit enter and the value is successfully updated to "Shawshank Redemption" (this is what we expected in step 3).

As you can see we used two paths to try to update the text value to "Shawshank Redemption" and the user would expect both (step 3 and step 5 to work the same).

Context 🔦

Consistent value setting for users.

Your Environment 🌎

  • Chrome Version 91.0.4472.114 (Official Build) (x86_64)
  • MacOS
@mbyrne00 mbyrne00 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jul 6, 2021
@eps1lon
Copy link
Member

eps1lon commented Jul 13, 2021

Thanks for the report.

For freeSolo we probably don't want to consider the selected element the active-descendant during typing. If you press escape before enter (i.e. closing the dropdown), enter works as expected.

@eps1lon eps1lon added bug 🐛 Something doesn't work component: autocomplete This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jul 13, 2021
@mbyrne00
Copy link
Author

Thanks - I was confused by your message until I saw you put the bug tag on and acknowledged it seems to be a bug. Slight typo 'don't want to move consider'.

I think broadly you meant to say you don't want to consider the dropdown as being active during typing. Hopefully :)

It's certainly confusing to our users so hope this can be treated as a bug.

@eps1lon
Copy link
Member

eps1lon commented Jul 14, 2021

I think broadly you meant to say you don't want to consider the dropdown as being active during typing. Hopefully :)

The statement just didn't make sense with the typo. Should be clearer now:

For freeSolo we probably don't want to consider the selected element the active-descendant during typing. If you press escape before enter (i.e. closing the dropdown), enter works as expected.

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

No branches or pull requests

2 participants