Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Dropdown with multi not working

I am not able to reproduce the nice multi-select mode of Dropdown component. I created the most barebones app possible and am seeing this behavior. I cannot change the selection. Chrome Console spits out some react errors.

Here is my app:

Version info (pulled updates ten minutes ago):

plotly (2.0.12)
dash (0.17.7)
dash-core-components (0.5.3)
dash-html-components (0.6.2)
dash-renderer (0.7.3)
python                    3.5.2

Hey @PeterS, thanks for raising! This is actually “expected” right now. The components won’t really work properly until they have a callback assigned to them. There was a little note about this in the documentation, but it’s easy to miss:

Notice that these elements aren’t interactive yet: clicking on the checkboxes, dragging the slider, and entering text in the input doesn’t update the component. These components will become interactive in the final section of this tutorial on interactivity.

There have been a few questions about this already so I think that I’ll modify the behaviour of these components to work as expected without callbacks.

In your case, just add something like:

1 Like

Thanks! I think I know what to add, but I think you left out the example from your post.

This is what I did to get this simple example working:

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input

app = dash.Dash('')

app.layout = html.Div([dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value="MTL",
        multi=True),
html.P(id='my-para')])

@app.callback(
    Output('my-para', 'children'),
    [Input('my-dropdown', 'value')])
def dummy(selection):
    return ''

if __name__ == '__main__':
    app.server.run(debug=True)