Dropdown options update but not the value

Hi all,

I ran into this today, and either need more coffee or something is not working properly. When I attempt to update the values of one dropdown from another, the options populate in the second dropdown, but the value does not.

I’ve attached some code and a gif.

Any help is much appreciated.


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

import db.api as db

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.config['suppress_callback_exceptions'] = True

app.layout = html.Div(children=[
    dcc.Location(id='url', refresh=False),

                    dict(label="Both", value="both"),
                    dict(label="Male", value="male"),
                    dict(label="Female", value="female")
            html.Label("Phenotype code"),

@app.callback(Output("dropdown-pheno", "options"),
              [Input("dropdown-sex", "value")])
def update_pheno_dropdown(sex):
    vals = db.get_gwas_for_sex(sex).values
    return [dict(label=elem, value=elem) for elem in vals]

@app.callback(Output("dropdown-pheno", "value"),
              [Input("dropdown-pheno", "options")])
def set_pheno_value(options):
    val = options[0]["value"]
    print(f"setting value to {val}")
    return val

@app.callback(Output("selected-pheno-div", "children"),
              [Input("dropdown-pheno", "value")])
def show_selected_pheno(pheno):
    return pheno

if __name__ == '__main__':



I had a similar issue when developing an application with dependent dropdowns. Here is the link to that issue, along with the solution: Help with a dropdown related bug

I believe the following will fix your issue, although I don’t know for sure since your code requires a db component which has an implementation that is not apparent. If you can make a reproducible example, then I can tinker around more.

@app.callback(Output("dropdown-sex", "value"),
              [Input("dropdown-pheno", "options")]
              [State("dropdown-sex", "value"])
def set_pheno_value(, value):
    val = options[0][value] 
    print(f"setting value to {val}")
    return val

Hope that helps!

Thanks for taking a look! However, I think I was unclear.

When seleting the sex dropdown, I get variable options for phenotype. When I select one of those, I expect that the value of that dropdown, the phenotype one, will show the text I selected. However, it remains blank. That’s the issue. I was trying to hack something so it wouldn’t remain blank.

For a test, we can do the following:

replace with:

@app.callback(Output("dropdown-pheno", "options"),
              [Input("dropdown-sex", "value")])
def update_pheno_dropdown(sex):
    options = {"both": ["pheno1", "pheno2", "pheno3"],
           "male": ["pheno1"],
           "female": ["pheno2", "pheno3"]}
    vals = options[sex]
    return [dict(label=elem, value=elem) for elem in vals]

However, when doing this, the functionality seems to work fine. I don’t get it. Sigh.

Well, that was self-inflicted. The return from the db query was a list of lists not a list of strings. Argh. Back to my original question - was a matter of coffee after all.

Was returning:


Fixed with:

vals = [x[0] for x in db.get_gwas_for_sex(sex).values]

Thanks for your help.