Python dash dropdown placeholder text

Question

I am trying to build a dropdown menu in dash, where the text of the placeholder should be defined by another callback.

What I tried so far is to have the placeholder defined by a html.Div, like this: dcc.Dropdown(id = 'test_dropdown', options = [{'label': 'Test1', 'value': '1'},{'label': 'Test2', 'value': '2'}], placeholder = html.Div(id = 'test_placeholder')), with the text being defined by the other callback. This resulted in the following error message: Invalid argument placeholder passed into Dropdown with ID "test_dropdown". Expected string. Was supplied type array.

If I remove the square brackets around the html.Div, the error message becomes: The dash_core_components.Dropdown component (version 1.16.0) with the ID "test_dropdown" detected a Component for a prop other than children Did you forget to wrap multiple children in an array? Prop placeholder has value Div(id='test_placeholder')

Has anyone got suggestions on how I could implement a placeholder that depends on another dropdown? Or would it be better to implement multiple dropdowns, and hide all but one using a hidden html.Div?

Thanks in advance for your help

Michel Michel · Accepted Answer · 2021-05-21T09:19:29

Simply put the placeholder of the dcc.Dropdown as Output of your callback.

Here is a minimal example with a dcc.Input that controls the placeholder. Of course, anything can be used as Input for the callback that changes the placeholder, e.g. the value of another dcc.Dropdown:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output

app = dash.Dash(__name__)
app.layout = html.Div([
    dcc.Input(id='demo-input', value='Type here'),
    dcc.Dropdown(
        id='demo-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'}
        ]
    )
])

@app.callback(
    Output('demo-dropdown', 'placeholder'), # <- dropdown placeholder gets updated
    Input('demo-input', 'value'))
def update_placeholder(value):
    return value

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

Python dash dropdown placeholder text

1 Answers