Black Lives Matter. Please consider donating to Black Girls Code today.

Clear dropdowns on callbacks


I have some dropdowns that return the options in callbacks, for example:

    dash.dependencies.Output('types-dropdown', 'options'),
    [dash.dependencies.Input('data-json', 'options')])
def update_types_menu(data):
    col_name = data['name']
    return [{'label': i, 'value': i} for i in col_name]

The problem is, when the data-json is updated and the chosen value in the dropdown also exists in the new data-json, it will be chosen. But I want no value is chosen when it is updated.

Are there any ways to return a NULL chosen value for dropdown callback, like:

return ( [{'label': i, 'value': i} for i in col_name]

or somehow set the default value for dcc.Dropdown even in newly updated inputs ?

Thank you in advance.

What about a callback that clears the dropdown’s value when its options change? ie

@app.callback(Output('dropdown', 'value'), [Input('dropdown', 'options')])
def callback(value):
    return ""

The only catch is that because this will run on the first page load, it will clear any default value for value set via the layout. If you want a default value you would need to throw an exception in the callback based on some appropriate logic. (Can do this by counting n_clicks, although it gets harder if you want to support other input methods than clicking)

1 Like

This is exactly what I wanted. I didn’t think of clearing the input before.
Thank you @nedned !

1 Like

@nedned, if we want to set the drop down values now again with some other set of values, can we do it? As it seems we can’t put same output from multiple input.