Merge pull request #3183 from plotly/fix-external-wrapper-id

Fix external wrapper requiring id.

Author: T4rk1n

@plotly/dash-test-components/src/components/ExternalComponent.js

@@ -8,20 +8,23 @@ const ExternalComponent = ({ id, text, input_id, extra_component }) => {
 
     return (
         <div id={id}>
-            <ExternalWrapper
-                id={input_id}
-                componentType="Input"
-                componentNamespace="dash_core_components"
-                value={text}
+            {text && <ExternalWrapper
+                
+                component={{
+                    type: "Input",
+                    namespace: "dash_core_components",
+                    props: {
+                        value: text,
+                        id: input_id
+                    }
+                }}
                 componentPath={[...ctx.componentPath, 'external']}
-            />
+            />}
             {
                 extra_component &&
                 <ExternalWrapper
-                    componentType={extra_component.type}
-                    componentNamespace={extra_component.namespace}
+                    component={extra_component}
                     componentPath={[...ctx.componentPath, 'extra']}
-                    {...extra_component.props}
             />}
         </div>
     )

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

@@ -1,7 +1,7 @@
 import React, {useState, useEffect} from 'react';
 import {batch, useDispatch} from 'react-redux';
 
-import {DashLayoutPath} from '../types/component';
+import {DashComponent, DashLayoutPath} from '../types/component';
 import DashWrapper from './DashWrapper';
 import {
     addComponentToLayout,
@@ -11,21 +11,14 @@ import {
 } from '../actions';
 
 type Props = {
+    component: DashComponent;
     componentPath: DashLayoutPath;
-    componentType: string;
-    componentNamespace: string;
-    [k: string]: any;
 };
 
 /**
  * For rendering components that are out of the regular layout tree.
  */
-function ExternalWrapper({
-    componentType,
-    componentNamespace,
-    componentPath,
-    ...props
-}: Props) {
+function ExternalWrapper({component, componentPath}: Props) {
     const dispatch: any = useDispatch();
     const [inserted, setInserted] = useState(false);
 
@@ -34,11 +27,7 @@ function ExternalWrapper({
         // The props will come from the parent so they can be updated.
         dispatch(
             addComponentToLayout({
-                component: {
-                    type: componentType,
-                    namespace: componentNamespace,
-                    props: props
-                },
+                component,
                 componentPath
             })
         );
@@ -50,10 +39,19 @@ function ExternalWrapper({
 
     useEffect(() => {
         batch(() => {
-            dispatch(updateProps({itempath: componentPath, props}));
-            dispatch(notifyObservers({id: props.id, props}));
+            dispatch(
+                updateProps({itempath: componentPath, props: component.props})
+            );
+            if (component.props.id) {
+                dispatch(
+                    notifyObservers({
+                        id: component.props.id,
+                        props: component.props
+                    })
+                );
+            }
         });
-    }, [props]);
+    }, [component.props]);
 
     if (!inserted) {
         return null;

tests/integration/renderer/test_external_component.py

@@ -23,6 +23,10 @@ def test_rext001_render_external_component(dash_duo):
                     },
                 },
             ),
+            ExternalComponent(
+                id="without-id",
+                text="without-id",
+            ),
             html.Div(html.Div(id={"type": "output", "index": 1}), id="out"),
         ]
     )
@@ -53,3 +57,5 @@ def click(*_):
 
     dash_duo.find_element("#extra > div").click()
     dash_duo.wait_for_text_to_equal("#out", "clicked")
+
+    assert dash_duo.get_logs() == []