Combobox: removing selected option and/or displaying all options if selection exists

[jannetim]

To which feature the request relates to

Seeing the full list of options after selection and/or removing selected option is difficult and rather unintuitive with Default single Combobox. After selection, the input text has to be either cleared with keyboard by selecting all and deleting, or with mouse by selecting the input text and clicking cut from the mouse actions menu to reset Combobox. I'd think the current implementation might be questionable from the accessibility point of view, too.

This problem can be produced in Storybook by selecting e.g. "Valinta 2" and then opening the dropdown again where only "Valinta 2" with checkmark is displayed with no apparent cue of how to unselect the option, or how to see other options that should be available. Screenshot below.

What

There's a few options to solve this. In my opinion best solution would be to combine Select and Combobox functionalities so that if Combobox is opened, even if something is already selected, the list of other options is always shown (Select example in Storybook). Example of similar feature can be seen with React Select's single select.

Alternative option (or even better: in addition to the previous solution) would be to implement clearable prop to default Combobox as currently only multiselect Combobox supports it. This could be done whilst implementing clearable in Select as described in the other issue thread.

Why

Current behaviour is confusing to the user and has a high probability that the user gets stuck. And in any case it creates a situation where unnecessary actions are needed if a selection needs to be changed afterwards.

Related material

Screenshot for the problematic list view:

React Select example: https://react-select.com/home