Getting values selected from dropdown menue only after click event?

I am using pattern matching code from page: here.

Code is:

@app.callback(
    Output('dropdown-container-output', 'children'),
    Input({'type': 'filter-dropdown', 'index': ALL}, 'value')
)
def display_output(values):
    return html.Div([
        html.Div('Dropdown {} = {}'.format(i + 1, value))
        for (i, value) in enumerate(values)
    ])

Here I am interested in this Input({'type': 'filter-dropdown', 'index': ALL}, 'value') but only when click event has occurred. Have tried multiple things but got no success. Any help will be greatly appreciated.

Thank You.

Could you clarify a little bit on which click event are you referring to?

I am sorry for not adding click event in the code.

@app.callback(
    Output('dropdown-container', 'children'),
    Input('add-filter', 'n_clicks'),
    State('dropdown-container', 'children'))
def display_dropdowns(n_clicks, children):
    new_dropdown = dcc.Dropdown(
        id={
            'type': 'filter-dropdown',
            'index': n_clicks
        },
        options=[{'label': i, 'value': i} for i in ['NYC', 'MTL', 'LA', 'TOKYO']]
    )
    children.append(new_dropdown)
    return children

This is from the same page I have referenced earlier.

I wanted to get input: Input({'type': 'filter-dropdown', 'index': ALL}, 'value') only after click even with id add-filter has occurred.

Later I found this can be done by changing display_output function the following way:

@app.callback(
    Output('dropdown-container-output', 'children'),
    Input('add-filter', 'n_clicks'),
    State({'type': 'filter-dropdown', 'index': ALL}, 'value')
)
def display_output(number_of_times_clicked, filter_dropdown_input_state):
    [complete the function]

Thanks again @jlfsjunior for the reply. Let us know if have better solution than this. Thanks!

1 Like

I see now! Thank you for clarifying!

Nothing else to add, your solution is the good one.