Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

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

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([
   id='tabs', value=1, children=[
      dcc.Tab(label='Label1', value=1),
      dcc.Tab(label='Label2', value=2),
       # local storage_type is only removed manually.
    #  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([   
            {'label': 'New York City', 'value': 'NYC'},
            {'label': 'Montreal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}

    elif value == 2:
        return html.Div([

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

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

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

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

    'external_url': ''

if __name__ == '__main__':

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.