Improve the displaying of the selected option in dropdowns
I recently reviewed a component migration MR for a couple of dropdowns and noticed an odd pattern for displaying the selected option. After discussing it with the engineer who was implementing this, I came to the conclusion that this is the default approach.
When an option is selected from the list, the dropdown is also filtered by that option. However, that is not reflected in the search box above. There are numerous other options available but they're hidden because of that filter being set. The only way to see those other options is to write something in the search box and click on the clear icon. See video below.
We think that this is the default behaviour because otherwise it would be hard to find the currently selected option (among many). This can be disabled however, but the result is often the selected option being buried among many and hard to find. My conclusion, so far, is that none of these two interactions are good. I think that showing the selected option differently by default could solve this:
This would work well with single selection but what would the solution be for multi-select? Should we show multiple selections like this?
I think our options are:
- explore this solution further (+ find one for multi select)
- disable the default filtering to the selected option
- reflect that the list is filtered in the search box (with an option to clear)
The last one seems the most MVC to me but I'd love to hear other's thoughts.
Relevant discussion in related MR