Fix set_props with children not having prop value in callbacks

Author: T4rk1n

dash/dash-renderer/src/actions/callbacks.ts

@@ -36,13 +36,13 @@ import {
 } from '../types/callbacks';
 import {isMultiValued, stringifyId, isMultiOutputProp} from './dependencies';
 import {urlBase} from './utils';
-import {getCSRFHeader, dispatchError} from '.';
+import {getCSRFHeader, dispatchError, setPaths} from '.';
 import {createAction, Action} from 'redux-actions';
 import {addHttpHeaders} from '../actions';
 import {notifyObservers, updateProps} from './index';
 import {CallbackJobPayload} from '../reducers/callbackJobs';
 import {handlePatch, isPatch} from './patch';
-import {getPath} from './paths';
+import {computePaths, getPath} from './paths';
 
 import {requestDependencies} from './requestDependencies';
 
@@ -51,6 +51,7 @@ import {loadLibrary} from '../utils/libraries';
 import {parsePMCId} from './patternMatching';
 import {replacePMC} from './patternMatching';
 import {loaded, loading} from './loading';
+import {getComponentLayout} from '../wrapper/wrapping';
 
 export const addBlockedCallbacks = createAction<IBlockedCallback[]>(
     CallbackActionType.AddBlocked
@@ -409,7 +410,25 @@ function sideUpdate(outputs: SideUpdateOutput, cb: ICallbackPayload) {
                 return acc;
             }, [] as any[])
             .forEach(([id, idProps]) => {
+                const state = getState();
                 dispatch(updateComponent(id, idProps, cb));
+
+                const componentPath = getPath(state.paths, id);
+                const oldComponent = getComponentLayout(componentPath, state);
+
+                dispatch(
+                    setPaths(
+                        computePaths(
+                            {
+                                ...oldComponent,
+                                props: {...oldComponent.props, ...idProps}
+                            },
+                            [...componentPath],
+                            state.paths,
+                            state.paths.events
+                        )
+                    )
+                );
             });
     };
 }

tests/integration/callbacks/test_arbitrary_callbacks.py

@@ -232,3 +232,44 @@ def test_arb007_clientside_no_output(dash_duo):
     dash_duo.wait_for_text_to_equal("#output", "start1")
     dash_duo.find_element("#start2").click()
     dash_duo.wait_for_text_to_equal("#output", "start2")
+
+
+def test_arb008_set_props_chain_cb(dash_duo):
+    app = Dash(suppress_callback_exceptions=True)
+
+    app.layout = html.Div(
+        [
+            html.Button("origin button", id="origin-button"),
+            html.Div(id="generated-button-container"),
+            html.Div("initial text", id="generated-button-output"),
+        ],
+        style={"padding": 50},
+    )
+
+    @app.callback(
+        Input("origin-button", "n_clicks"),
+    )
+    def generate_button(n_clicks):
+        set_props(
+            "generated-button-container",
+            {
+                "children": html.Button(
+                    "generated button", id="generated-button", n_clicks=0
+                )
+            },
+        )
+
+    @app.callback(
+        Output("generated-button-output", "children"),
+        Input("generated-button", "n_clicks", allow_optional=True),
+        prevent_initial_call=True,
+    )
+    def update_output(n_clicks):
+        return f"n_clicks: {n_clicks}"
+
+    dash_duo.start_server(app)
+
+    dash_duo.wait_for_element("#origin-button").click()
+    for i in range(1, 5):
+        dash_duo.wait_for_element("#generated-button").click()
+        dash_duo.wait_for_text_to_equal("#generated-button-output", f"n_clicks: {i}")