Is there any way to make two objects share a property?

Dash Python
1

Hey all,

I’m trying to link multiple dropdowns, so the selection in any one of them, goes to all of them. I managed to create a “main” dropdown that passes its value to the rest of the dropdowns, but I can’t manage to make it work the other way around. Let’s simplify: I have dropdown 1 and 2. Currently if I change dropdown 1’s value, dropdown 2 also changes, but not the other way around. Is there any way to actually link their value?
The relevant part of my code looks like this:

html.Div(dcc.Dropdown(id='dropdown-1',
                      options=options_paises,
                      value=['Chile', 'France', 'Spain', 'Italy', 'United States'],
                      multi=True
                      )
html.Div(dcc.Dropdown(id='dropdown-2',
                      options=options_paises,
                      multi=True
                      )

@app.callback(Output(component_id='dropdown-2', component_property='value'),
              [Input(component_id='dropdown-1', component_property='value')])
def get_value(value):
    return value

But, as stated, this links only 2 to 1, but not 1 to 2. Is it possible to do it?

2

To my knowledge, there is no good solution (yet). But it can be done,

1 Like
3

Thanks @Emil, I’ll check if I understood and if I can make the solution work. But it seems it’s exactly what I’m looking for. Also, follow-up question: is it possible to add a default value when syncing like this?

Also, I’m getting a Circular dependencies error, even though the app is working just right. Is this expected?

4

Have you tried setting the initial value of both components and the sync store to the desired default value?

5

That worked! Didn’t know I could use the value property if I defined it on callbacks. Thanks a lot @Emil !