Here the scenario:
I want to access the previous selected value of a dcc.Dropdown component saving at every input action the current selected value in a DIV container to retrieve and check it later.
So given a dcc.Dropdown value as input to two callbacks:
- the first one that updates a DIV children property with the selected value
- and the other one that will get the dcc.Dropdown selected value as Input and the DIV children property as State
it seems to work as desired in the following example:
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Output, Input, State
app = dash.Dash(__name__)
app.layout = html.Div([
html.Label("Current selected value: "),
html.Div(id="selected_value"),
dcc.Dropdown(
id="dropdown",
options=[
{"label": "a", "value": 1},
{"label": "b", "value": 2},
],
multi=False,
# value=1,
placeholder="Select value"
),
html.Div(id="result"),
])
@app.callback(Output("result", "children"),
[Input("dropdown", "value")],
[State("selected_value", "children")])
def show_current_and_previous_value(value, state):
return "The selected value is %s and the previous selected one is %s" % (value, state)
@app.callback(Output("selected_value", "children"),
[Input("dropdown", "value")])
def save_selection_to_div(value):
return value
if __name__ == '__main__':
app.run_server(debug=True)
The scenario described above can only work if the 2nd callback executes before the 1st one, before the DIV children property is updated with the new selected value.
The two callbacks are dependent to each other because of the State dependencies and have the same Inputs, does this condition grant an execution order of the callbacks always in the sequence 2 -> 1 ?
I tested the above example code running it with single worker, does the execution order may be affected in a multiple worker execution environment where the callbacks will be processed in parallel?
Finally, checking the order in which the events are dispatched from the client to the backend, it turned out that the update of the DIV children property is always sent first although at backend side it’s processed as after the callback # 2. Can this affect the order of execution?
