plotly / plotly/dash

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

Open
#2,054 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug P3
Dominant language
Python
Stars
24.4k
Forks
2.3k
Avg merge
2d 7h
Merged PRs (30d)
13

Description

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:
image

Select option with a value='value'
image

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

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

Deselect 'empty-option-disabled':
image

Both options with value="" have returned.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Python dcc.Dropdown reproduction in the issue and review the dropdown changes referenced in !1970. Verify behavior with duplicate values, including value="", in multi-select mode; done means clearing removes the final selection and duplicate-valued options remain visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
python, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.