Material-ui: [Autocomplete] Don't display whole options list in Autocomplete when input text is the same as selected value

[k-rokicki]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When one of the options in Autocomplete is selected, there is a slightly non-natural behavior when manipulating input text. After deleting e.g. the last letter, the list with possible options is filtered by input text. When you type this deleted letter again, the whole list with all options is displayed. Later, if you add another letter, filtering takes effect again.

Examples 🌈

You can try it on the first demo (Combo box) on Autocomplete page (https://material-ui.com/components/autocomplete/).

1. Type the beginning of one of the options, e.g. "Pulp":

2. Hit enter or choose this option by clicking:

3. Hit backspace to remove last letter (now filtering is active):

4. Type "n" (now filtering is not active):

5. Type any letter (now filtering is active again):

Motivation 🔦

Displaying the whole list of options with selected value highlighted looks right when you open the list with mouse click, but behavior described above looks a little confusing and may be recognized as a bug.

[k-rokicki]

@eps1lon has anybody looked at this? I feel like it was somehow unnoticed as new issues are getting responses and this one not.

[montelius]

Can I try to solve this or are you already working on it? :) @k-rokicki

[k-rokicki]

@montelius go ahead, and thanks for volunteering!

[eps1lon]

@montelius All yours. Please let us know if you no longer intend to work on this issue. If you're stuck at any point feel free to open a PR so a maintainer can take a look.

[montelius]

@eps1lon So I've figured out why this bug exists, but I'm not sure how to solve it. Here's the problem:

When an option is selected, the listbox of options is closed. When you either focus on the textbox again, or click the arrow down button, the entire list of options is shown, not just the option matching the input. That makes sense in that case, because the user probably wants to change the selected option and should be shown all options. That is controlled by this code in useAutocomplete.js:

https://github.com/mui-org/material-ui/blob/d9d60e615470d78a721f5d392a84aaf892637a17/packages/material-ui/src/useAutocomplete/useAutocomplete.js#L180-L181

and this code, specifically line 200:

https://github.com/mui-org/material-ui/blob/d9d60e615470d78a721f5d392a84aaf892637a17/packages/material-ui/src/useAutocomplete/useAutocomplete.js#L185-L202

The problem is that this case also applies to the case described in the issue, which does not make sense for the user. When an option is selected, it continues to be selected even though you remove the last letter, so when you type in the last letter again, inputValueIsSelectedValue in the code above becomes true.

So basically, you would probably want to make inputValueIsSelectedValue false if useAutocomplete was called because of a new keyboard input, and not because the textbox/arrow down button was clicked. However, I can't find a reasonable way to access that information from inside useAutocomplete. Can I get any help on how to solve this?

Alternatively, another possible solution is that an option stops being selected if you remove a letter from the input.

Thanks in advance!

[eps1lon]

Could you codify your expected behavior into a test or user interactions? You could open a PR with just the test and then we can collaborate on a potential fix.

[montelius]

@eps1lon Sounds good, thanks!

[oliviertassinari]

A proposed solution: we could create a new state that keep track of the pristine state of the input value. It's reset each time the popup open. When the input is pristine, we don't filter the options for the current value.

[montelius]

@oliviertassinari Yes, that is a solution! Should the state be represented as a prop passed to useAutocomplete?

[oliviertassinari]

@montelius from my perspective, the state should be internal to the useAutocomplete hook.

[montelius]

@oliviertassinari Sure, will look into it! :)