digdir / designsystemet

Designsystemet
https://designsystemet.no
MIT License
82 stars 38 forks source link

Single Select can't clear selection once an item is selected #298

Closed mimarz closed 11 months ago

mimarz commented 1 year ago

Description of the bug

Once an item is selected, either by typing and searching or clicking, it is not possible to clear selection.

Steps To Reproduce

  1. Focus on select
  2. Select item, either by typing or using mouse to select

Additional Information

As a user I expect that a clear icon button would appear so that I can trigger it to clear the selection.

Just deleting the text value in input should also suffice to clear selection.

TomasEng commented 1 year ago

Is would rather consider this as a feature request than a bug. In a native select (and on radio buttons) there is no possibility to clear the selection. General practice is to add an empty option in cases where this should be possible.

mimarz commented 1 year ago

Is would rather consider this as a feature request than a bug. In a native select (and on radio buttons) there is no possibility to clear the selection. General practice is to add an empty option in cases where this should be possible.

If we want this the Select to behave as a native select then we should maybe not have an input element as a element for selected options or typing? 🤔

I find it very confusing that its an input element and the list underneath is not filtered or that I can't clear it. As a user when I am prompted with a input field and a list of options, I would expect the list to be filtered when I type something and be able to clear it.

mimarz commented 1 year ago

hmm, maybe we need have a Autocomplete and Select component? Let select be a select and autocomplete be autocomplete. Our current Select I feel is currently a mix of both.

Edit: These two for me show the clear distinction between a combobox as a select or autocomplete:

mimarz commented 11 months ago

This is solved by #1090

You can clear selection in single select mode by just deleting the input value text.

If this feature is not wanted, you can use "controlled" mode to prevent complete clear.