Div of Dropdowns unexpectedly clear when Div is used as Output and State of callback

Dash Python
1

I want to be able to add dcc.Dropdown elements when a button is clicked. I can get the Dropdowns to appear, and I can select items from them. But whenever I select an item from a Dropdown, all other Dropdown selections reset. I have looked into registering the Dropdowns to callbacks as suggested here (https://github.com/plotly/dash-renderer/issues/40) but it doesn’t change anything. Here is a minimal example:

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

app = dash.Dash(__name__)

app.layout = html.Div([html.Div([], 'dropdown-div'),
                       html.Button('+', id='add-dropdown')],
                      id="container")


@app.callback(Output('dropdown-div', 'children'),
              [Input('add-dropdown', 'n_clicks')],
              [State('dropdown-div', 'children')])
def add_dropdown(n, dropdown_div):
    if n is not None:
        n_dropdowns = len(dropdown_div)
        dropdown_index = n_dropdowns + 1
        dropdown_id = f'dropdown{dropdown_index}'
        dropdown = dcc.Dropdown(dropdown_id, options=[{'label': '1', 'value': '1'},
                                                      {'label': '2', 'value': '2'},
                                                      {'label': '3', 'value': '3'}],
                                value='', multi=False)
        dropdown_div.append(dropdown)

        return dropdown_div

    else:
        raise PreventUpdate()


app.run_server(host="0.0.0.0", debug=False)

If I remove the State input to the callback, things work as expected. But having the state in there is essential to the functionality. Any help is appreciated!

2

I found that a complete refactor was easier than trying to get this approach to work. If I choose a max number of Dropdown components I can make things work using the strategy described here: Dynamic Controls and Dynamic Output Components