Autosuggest should not open the list when the component receives the focus

[GomezIvann]

Two main questions here:

• Should the TextInput open the suggestions list when the component gains the focus? I think this functionality is more appropriate for a select, in which an option must be chosen.
• If the answer to the previous question is no, should it be closed when the user deletes the written string and the field is empty? I think yes.

[aweell]

Thanks @GomezIvann!

I think this functionality is more appropriate for a select, in which an option must be chosen.

My take on this is that probably we need to study case by case instead of relying upon a component-based solution.

I did small research looking for this behavior, and I found out that when the user clicks on the list but there was no value entry is called zero state. I propose to use this term from now on!

So...when is interesting to not show the list when the component autosuggest receives focus?

Zero state - List closed

• When the list of results is extremely long (+25): In this case is better to show a filtered list to reduce cognitive load and speed up the search of suggestions.

Zero state - List open

• When the user needs help to understand the expected values in the field: Sometimes the label or the helper text cannot be as explanatory as should be.
• Show recent searches: When used as a search field, a common pattern is to show recent searches in the "zero state"

I'll be updating with more info If I'm able to find it or with some ideas for the two zero-state list-behavior options...

References

• https://uxmag.com/articles/best-practices-designing-autosuggest-experiences

[GomezIvann]

Some Autosuggest components to compare:

1. In React Autosuggest the approach is to let the user choose the zero state with a PROP 😃, you can even choose the length of the string (shouldRenderSuggestions): https://react-autosuggest.js.org/.
2. In Ant they also have a prop called defaultOpen to customized the zero state. In this case, you can't choose the length: https://ant.design/components/auto-complete/.
3. Aria's autocomplete component recommendation. Here the approach is to let the user choose the minimum length of value necessary to display the Listbox: https://alphagov.github.io/accessible-autocomplete/examples/.

[GomezIvann]

After seeing many other sites and implementations, my conclusion and the most common approach is to let the user choose when the list is displayed, by opening this with a prop. Two possible solutions:

• defaultOpen: boolean. A boolean that defines if zero state should have the list open or not (called or not in case suggestions is a function).
• minLengthToOpen: number. An integer that defines the minimum length the value has to have in order to open the suggestions or to call the possible callback user can pass us. By default, it could be set to 0.

[aweell]

PLOT TWIST

Thinking about this opens the door to maybe consider the autosuggest a component instead of being part of the text input? (Since these props affect directly the list behavior)

Because I see the value of bringing these two props to the design system. I agree that the use cases where a user would need to have the list closed or open as a zero state is a bit far from our control...(It seems odd to me baking some of the reasons that I listed in #672 (comment) in our component logic)