Custom select component with filtering

Question

Custom select components are seen everywhere these days due to the limitations of the native HTML select element. Ignoring the virtues (or lack thereof) of select components (c.f. https://gerireid.com/forms.html#select), I have a question on the UX of "filterable" custom select components.

Consider this example from the popular react-select library:

As you can see, typing in the input filters the list of options. If the user unfocussed the input (e.g. by clicking outside, like I did), the value of the input is reverted to what it was before the user started typing. If the user selects one of the options (by clicking or by pressing "Enter"), the value of the input changes to the value of that option.

It seems to be that this behaviour could be confusing to users. Typing in a field that looks very much like a text input should behave like a text input, but here leaving the field without having selected an option snaps the value back to what it was before! Even worse, if the user types a value that is a valid option, e.g. Ocean, it will also snap back to the last value unless they explicitly select the Ocean option from the filtered list.

Now consider Stripe's implementation:

Instead of using the input itself as a search filter, they use another input at the top of the list of options. When the user clicks on the select component the focus switches to the search input. They can filter options and select one. If the component loses focus (e.g. the user click s outside of it, like I did), the dropdown closes, leaving the value of the select unchanged.

This seems a lot more intuitive to me. There isn't the surprising behaviour of the select's value "snapping back". It stays the same until you select an option, and filtering is done through a separate field.

Now I have two questions:

1. What do you think? Do you agree that Stripe's implementation provides a (significantly) better user experience? And if you disagree, why?
2. Do you have any references (either user research or "authoritative" sources) that mention this specific problem? My intuition tells me that react-select's implementation provides poor user experience, but... my intuition is very far from authoritative.

Thanks!

Answer 1

Stripe got it right. In the first example, even if you type the first letters, they should be kept in the input field even if you click out. It is poor UX to discard user progress before validating it. I would go with the Stripe solution. If you click out, reverse to default and keep the input field focused.