[BUG] UI components not updating from dash_table connected callback #1071
Description
Describe your context
dash 1.7.0
dash-core-components 1.6.0
dash-html-components 1.0.2
dash-renderer 1.2.2
dash-table 4.5.1
- macOS Catalina Version 10.15.2
- Chrome Version 79.0.3945.88
Describe the bug
The issue is not apparent in dash 1.6.1, but appeared in 1.7.0.
For certain callback graphs, UI components with callbacks connected to a dash_table will not update their state.
Example callback graph and code:
import dash
import dash_html_components as html
import dash_table
from dash.dependencies import Input, Output
import random
app = dash.Dash(__name__)
app.layout = html.Div(
[
html.Div(id="level-1_1"),
html.Div(id="level-1_2"),
html.Div(id="level-2_1"),
html.H1(id="level-2_2"),
html.Button("Update", id="button"),
dash_table.DataTable(id="table"),
],
)
@app.callback(
# Changing the order of outputs here fixes the issue
[Output("level-1_2", "children"), Output("level-1_1", "children")],
[Input("button", "n_clicks")],
)
def level1(n_clicks):
if n_clicks is None:
return "initializing", "initializing"
return "level-1_2", "level-1_1"
@app.callback(
Output("level-2_1", "children"), [Input("level-1_1", "children")],
)
def level2_1(data):
if data is None:
return "initializing"
return "level-2_1"
@app.callback(
Output("level-2_2", "children"),
[Input("level-1_2", "children"), Input("table", "selected_cells")],
)
def level2_2(data, selected_cells):
if data is None:
return "initializing"
return "hello " + str(random.randint(0,100))
if __name__ == "__main__":
app.run_server(debug=True)
Expected behavior
The UI displays the H1 element with "hello" and a random number. When clicking the "Update" button, the H1 element will be updated.
Actual behavior and investigation
The H1 UI element nondeterministically displays either "hello XX" or "initializing" (see screenshot below) on startup. Clicking the update button does not change the H1 element. This is despite the browser receiving the correct callback response from the backend on _dash-update-component, e.g.
{"response": {"props": {"children": "hello 65"}}}
The issue only occurs with the dash_table connected as input to the callback (independent on using selected_cells or another attribute).
Changing the order of outputs in the first callback above (see comment), or removing the seemingly unrelated callback for Div 2_1 also make the issue disappear.
Looking at the differences between 1.6.1 and 1.7.0, this might potentially be related to changes in
#1027.
Screenshots
