Dropdown selections disappearing

Dash Python
1

Hello, I’m trying to set up a series of paired dropdown selectors, where choosing an option on dropdown A populates options on the paired dropdown B depending on what was selected. The issue that I am having is that the callback on the second pair erases the selection from the first one.

I have slimmed the code down somewhat for this example, but the issue is seen if you select something in the first dropdown (option1), then select something from the second dropdown (option2). This appears to be tied to the callback. I don’t see anything in what I’m doing with the callback that should affect the first dropdown. Any advice/hints/solutions would be greatly appreciated as I have been beating my head against the wall on this for a while.

Thanks.

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from __future__ import print_function

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

app = dash.Dash()

mriIndexDict = {'option1' : ['a', 'b'],
                'option2' : ['c', 'd', 'e']}

app.layout = html.Div([
    html.Div(children='Select data to display'),
    # Select here first
    dcc.Dropdown(
            id='axis0-category',
            options=[{'label' : x, 'value' : x} for x in sorted(mriIndexDict)]
        ),
    # Then select here, and it clears the first dropdown.
    dcc.Dropdown(
            id='axis1-category',
            options=[{'label' : x, 'value' : x} for x in sorted(mriIndexDict)]
        ),
    dcc.Dropdown(
            id='axis1-subcategory',
            options=[{'label' : x, 'value' : x} for x in sorted(mriIndexDict)])
])
            
@app.callback(Output('axis1-subcategory','options'),
              [Input('axis1-category', 'value')])
def updateAxis1Subcategory(axisCat):
    whichID = 'axis1-subcategory'
    if not axisCat:
        axisCat = 'option1'        
    return [{'label' : x, 'value' : x} for x in mriIndexDict[axisCat]]
            

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

The issue might be that you have Dropdown components in your layout that are not registered with a callback. Try either adding callbacks for those inputs or removing them from the layout. I’ve seen this before and have an open issue here which describes the problem in a bit more detail.

3 Likes
3

Thank you! Thank you! This solved my problem. I had been beating my head for hours against this issue and was about to give up on Dash…the frustration of building up the logic behind an app and then testing the pieces and having the selections disappear was really getting to me, as it meant that I was then undoing the logic to get to as simplified a version as possible to figure out what I was doing wrong. I’m not sure if there’s a way to associate this example with the open issue that you’d created (if it is something more easily replicable for the people working on it), but I think it would be great to fix or at least mention in the documentation as an issue since I would have thought it would crop up regularly as people develop applications.

Thanks again.

4

You’re a lifesaver. I’ve spent days trying to figure out why my input fields were clearing out every time you change an option in the previous input field. Hopefully they get this one fixed soon.