How to keep the dropdown value after button click in Dash?

I have an application in which I want to update the dropdown values when the user inputs some text into the dropdown. So far, I managed to get the text from an Input text that the user inputs, but not from the dropdown. The dropdown keeps reseting after clicking in any part of the screen or on the button.

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


app = dash.Dash(
    external_stylesheets=[
        dbc.themes.BOOTSTRAP])

app.layout = html.Div(
    [
        dcc.Input(id='helper'),
        dcc.Dropdown(id="my-dynamic-dropdown", options=[]),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        html.Br(),
        dbc.Button('Add to Dropdown', id='dropdown_button', n_clicks=0, color="info",
                   className="mr-1")
    ],

)

options = []


@app.callback(
    Output("my-dynamic-dropdown", "options"),
    Input('dropdown_button', 'n_clicks'),
    [State('my-dynamic-dropdown', 'options'),
    # State('helper', 'value')
    State('my-dynamic-dropdown', 'search_value')
     ]
)
def update_options(n_clicks,existing_options,helper_value):
    if helper_value is None:
        print("none value")
        return options
    else:
        print("helper value ",helper_value)
        options.append({'label': helper_value, 'value': helper_value})
        return options


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

13 posts - 2 participants

Read full topic