Fix ExternalWrapper pattern matching ids.

Author: T4rk1n

dash/dash-renderer/src/actions/index.js

@@ -6,7 +6,7 @@ import {getAction} from './constants';
 import cookie from 'cookie';
 import {validateCallbacksToLayout} from './dependencies';
 import {includeObservers, getLayoutCallbacks} from './dependencies_ts';
-import {getPath} from './paths';
+import {computePaths, getPath} from './paths';
 
 export const onError = createAction(getAction('ON_ERROR'));
 export const setAppLifecycle = createAction(getAction('SET_APP_LIFECYCLE'));
@@ -21,6 +21,14 @@ export const updateProps = createAction(getAction('ON_PROP_CHANGE'));
 export const insertComponent = createAction(getAction('INSERT_COMPONENT'));
 export const removeComponent = createAction(getAction('REMOVE_COMPONENT'));
 
+export const addComponentToLayout = payload => (dispatch, getState) => {
+    const {paths} = getState();
+    dispatch(insertComponent(payload));
+    dispatch(
+        setPaths(computePaths(payload.component, payload.componentPath, paths))
+    );
+};
+
 export const dispatchError = dispatch => (message, lines) =>
     dispatch(
         onError({

dash/dash-renderer/src/wrapper/ExternalWrapper.tsx

@@ -1,9 +1,14 @@
 import React, {useState, useEffect} from 'react';
-import {useDispatch} from 'react-redux';
+import {batch, useDispatch} from 'react-redux';
 
 import {DashLayoutPath} from '../types/component';
 import DashWrapper from './DashWrapper';
-import {insertComponent, removeComponent, updateProps} from '../actions';
+import {
+    addComponentToLayout,
+    notifyObservers,
+    removeComponent,
+    updateProps
+} from '../actions';
 
 type Props = {
     componentPath: DashLayoutPath;
@@ -21,14 +26,14 @@ function ExternalWrapper({
     componentPath,
     ...props
 }: Props) {
-    const dispatch = useDispatch();
+    const dispatch: any = useDispatch();
     const [inserted, setInserted] = useState(false);
 
     useEffect(() => {
         // Give empty props for the inserted components.
         // The props will come from the parent so they can be updated.
         dispatch(
-            insertComponent({
+            addComponentToLayout({
                 component: {
                     type: componentType,
                     namespace: componentNamespace,
@@ -44,7 +49,10 @@ function ExternalWrapper({
     }, []);
 
     useEffect(() => {
-        dispatch(updateProps({itempath: componentPath, props}));
+        batch(() => {
+            dispatch(updateProps({itempath: componentPath, props}));
+            dispatch(notifyObservers({id: props.id, props}));
+        });
     }, [props]);
 
     if (!inserted) {

tests/integration/renderer/test_external_component.py

@@ -1,4 +1,4 @@
-from dash import Dash, html, dcc, html, Input, Output, State
+from dash import Dash, html, dcc, html, Input, Output, State, MATCH
 from dash_test_components import ExternalComponent
 
 
@@ -17,10 +17,13 @@ def test_rext001_render_external_component(dash_duo):
                     "namespace": "dash_html_components",
                     "props": {
                         "id": "extra",
-                        "children": [html.Div("extra children", id="extra-children")],
+                        "children": [
+                            html.Div("extra children", id={"type": "extra", "index": 1})
+                        ],
                     },
                 },
             ),
+            html.Div(html.Div(id={"type": "output", "index": 1}), id="out"),
         ]
     )
 
@@ -33,9 +36,20 @@ def test_rext001_render_external_component(dash_duo):
     def on_sync(_, value):
         return value
 
+    @app.callback(
+        Output({"type": "output", "index": MATCH}, "children"),
+        Input({"type": "extra", "index": MATCH}, "n_clicks"),
+        prevent_initial_call=True,
+    )
+    def click(*_):
+        return "clicked"
+
     dash_duo.start_server(app)
     dash_duo.wait_for_text_to_equal("#external", "external")
     dash_duo.find_element("#sync-btn").click()
     dash_duo.wait_for_text_to_equal("#external", "synced")
 
     dash_duo.wait_for_text_to_equal("#extra", "extra children")
+
+    dash_duo.find_element("#extra > div").click()
+    dash_duo.wait_for_text_to_equal("#out", "clicked")