Dropdown menu update/scroll bug?

Dash Python
1

Hello guys, first time posting here.

So the problem basically occurs whenever I use more than 5 items within a dropdown options list. The problem is that I cannot select anything or scroll to the bottom of the dropdown, as it resets its scroll bar resets to the top.

Here is a gif of what is going on:
dropdown

Also, if I try to search for a specific name in the “unscrollable” range, the name is replaced by one of the first 5 that I show in the gif.

Edit: five items max are also shown when I replace the dropdown menu with a checklist.

Any ideas? Thanks!

Here is the code:
html.P(instructions_3, style={‘margin’: ‘10px’}),
html.Div([
dcc.Dropdown(
id = ‘team-selection’,
placeholder = ‘Membro team’,
options=[{‘label’: name, ‘value’: skill} for name, skill in team.itertuples(index=False)],
multi=True,
value=0)],
style={
‘width’: ‘30%’,
‘display’: ‘inline-block’,
‘margin’: ‘10px’
}),
])

@app.callback(Output(‘grafico’, ‘figure’),
[Input(‘upload-data’, ‘filename’),
Input(‘fc-range’, ‘value’),
Input(‘team-selection’, ‘value’)],
events = [Event(‘update’, ‘interval’)])
...

2

That’s odd, I’ve never seen that before.

I see you have value=0. Could you change that to a string from your team or None and see if that fixes the issue?

3

Hello! I actually understood why this happens: the value of my options list (the skill variable in my case) has non-unique, repeated elements.

For instance:
if i have

{‘label’: ‘1 year’, ‘value’: 12},
{‘label’: ‘2 years’, ‘value’: 19},
{‘label’: ‘55 years’, ‘value’: 19},
{‘label’: ‘25 years’, ‘value’: 22},

the two 19s there will conflict, and only yhe first will be shown. Almost as if the first 19 “summarizes” the value of the second.

The dropdown menu only renders correctly unique values

1 Like
4

Makes sense. Thanks for reporting!

5

Just for knowledge: is this a bug or an expected behavior? I wonder if there’ll be a patch if this is a bug. Thank you :slight_smile:

EDIT:
as a rudimentary fix, I did
team.skill = team.skill.add(team.skill.index/10000000)

to make the numbers unique by an irrelevant value that won’t affect the computations.

6

It is not a bug. The value properties need to be unique as they are passed down into the callback. If they weren’t unique, then you wouldn’t know which element was selected. Consider them like “ids”.

Of course, we should through an actual error message when the value property isn’t correct. I made an issue about this here: https://github.com/plotly/dash-core-components/issues/254

7

Great, thank you for your replies.