dcc.Dropdown clearing set selected value to option with value=""

[HenrikSpiegel]

Describe your context
Please provide us your environment, so we can easily reproduce the issue.

• replace the result of pip list | grep dash below

dash                              2.1.0
dash-bio                          0.7.1
dash-bootstrap-components         1.0.0
dash-core-components              2.0.0
dash-renderer                     1.9.1

• if frontend related, tell us your Browser, Version and OS

  • OS: Windows
  • Browser: Chrome
  • Version 101.0.4951.54

Describe the bug

When clearing a dropdown with multi=True it will not clear if there is an option with value="".
Instead when attempting to clear it will show that that an option with value="" has been selected.

Furthermore, if an option with value="" has been selected then all other options where value="" disappears.

• This is also the case for other values.
  • Tested with multiple options where value = "1"

I suspect it is related to changes in !1970
As this behavior is new and it appears the 1970 fix changes setting the value of dropdowns.

Expected behavior

When deleting the last option one would expect the dropdown to clear and not select value="" option.

Furthermore, it is not appropriate that options that share values are hidden when selected.

Screenshots

Component:

dcc.Dropdown(
  multi=True,
  clearable=True,
  options = [
	  {'label': 'Non-empty-option', 'value':'value'},
	  {'label': 'empty-option-disabled', 'value':'', 'disabled':True},
	  {'label': 'empty-option', 'value':''}
  ]
  )

On initial load:

Select option with a value='value'

Clear the options:
Note: Clicking either cross does nothing, furthermore, the option labeled 'empty-option' has disappeared from list.

We can then select the value='value' option.
we still can't see the 'empty-option' item.

Deselect 'empty-option-disabled':

Both options with value="" have returned.

[nickmelnikov82]

Here is a similar problem #1647.
The "value" attribute must be unique.