Dropdown list not updating ( while normal .div is updating)

Dash Python
1

Hello all,

I am working on a modelling tool in Dash which needs to have interactive functionalities across tabs. To demonstrate the problem I created the simplest working example that tries to implement:

  1. Select a value from the dropdown list on tab 1 (id=‘my-dropdown’)
  2. Save this value to the global environment with storage component (id=‘memory’)
  3. Show the value from 2. in a dropdown list on tab 2 (id=‘opt-dropdown’)

The problem is that the step 3 does not work - the value does not update!

As a control I am also writing the value from step 2 to both first tab (id=‘result1’) and second tab (id=‘result2’). Strikingly, there is no problem.

So basically, I am able to use the storage component to transfer values in terms of text but I cannot do this with dropdown? Please help me :frowning:

Attaching the code:


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



app = dash.Dash()
app.config['suppress_callback_exceptions'] = True
# app.css.config.serve_locally = True



app.layout = html.Div([
       dcc.Tabs(
   id='tabs', value=1, children=[
      dcc.Tab(label='Label1', value=1),
      dcc.Tab(label='Label2', value=2),
       # local storage_type is only removed manually.
     dcc.Storage(id='memory',
        storage_type='session'),
    #  html.Div(id='memory',style={'display': 'none'})
   ]
),
html.Div(id='tab-output')   ])



@app.callback(Output('tab-output', 'children'), [Input('tabs', 'value')])
def display_content(value):
    if value == 1:
        return  html.Div([   
                html.Div(id='result1'),
 dcc.Dropdown(
        id='my-dropdown',
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='NYC'
    ),

])
       
    elif value == 2:
        return html.Div([
    html.Div(id='result2'),
         dcc.Dropdown(
            id='opt-dropdown'
),                
])




@app.callback(
    dash.dependencies.Output('memory', 'data'),
    [dash.dependencies.Input('my-dropdown', 'value')])
def update_output(value):
    return value





@app.callback(
    Output('result1', 'children'),
   [dash.dependencies.Input('memory', 'data')]
 )
def update_result(data):
    return str(data)


@app.callback(
    Output('result2', 'children'),
   [dash.dependencies.Input('memory', 'data')]
 )
def update_result(data):
    return str(data)


@app.callback(
    dash.dependencies.Output('opt-dropdown', 'options'),
    [dash.dependencies.Input('memory', 'data')]
)
def update_date_dropdown(item):
   return [{'label':item, 'value': item}]




app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})

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

I’m partially ill so I might not be the best source of help as of right now…
I think the error lies in the Input you send to opt-dropdown.
You are feeding it Input('memory', 'data) and your function is waiting for the input 'item'.
Try feeding it 'data' like you’re doing in the other two cases.