Dash ensure consistency between url parameters and dropdown selection

Question

I have a dropdown with a few options and multi=True. I want the selection to be reflected in the URL, but I also want to be able to select the options using the URL.

dcc.Location(id='url',refresh=False)
...
dcc.Dropdown(id='hp-dropdown',
                 options=index,
                 clearable=False,
                 multi=True
                 )

I have a callback that updates the URL when I make a new selection in my dropdown.

@app.callback(
    Output('url','search'),
    Input('hp-dropdown','value')
)
def update_url(hps):
    if isinstance(hps, str):
        return '?ids='+hps
    return '?ids=' +','.join(hps)

Now what I want to do is also update the dropdown with the value from the URL, like this.

@app.callback(
    Output('hp-dropdown','value'),
    Input('url','search')
)
def update_dropdown(search):
    return search[5:].split(',')

However this is not possible due to circular callbacks. What pattern can I use instead? This is only a problem when I first load the page. If I have a selection in the URL, this is not reflected in the dropdown.

coralvanda coralvanda · Accepted Answer · 2020-09-06T00:15:06

You could add a button or other component that requires user activation to run the callback that updates the dropdown from the URL (with the URL as a State in the callback, not an Input). Then the flow would be button -> selection -> URL. It's no longer circular because the button won't fire automatically.

Dash ensure consistency between url parameters and dropdown selection

1 Answers