diff --git a/@plotly/dash-test-components/src/components/ExternalComponent.js b/@plotly/dash-test-components/src/components/ExternalComponent.js
index d82fbd93a0..64d2efc515 100644
--- a/@plotly/dash-test-components/src/components/ExternalComponent.js
+++ b/@plotly/dash-test-components/src/components/ExternalComponent.js
@@ -8,20 +8,23 @@ const ExternalComponent = ({ id, text, input_id, extra_component }) => {
return (
-
+ />}
{
extra_component &&
}
)
diff --git a/dash/dash-renderer/src/wrapper/ExternalWrapper.tsx b/dash/dash-renderer/src/wrapper/ExternalWrapper.tsx
index 79bcbb5162..a6b1dad13f 100644
--- a/dash/dash-renderer/src/wrapper/ExternalWrapper.tsx
+++ b/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;
diff --git a/tests/integration/renderer/test_external_component.py b/tests/integration/renderer/test_external_component.py
index 72657125f5..c0ab76fcc3 100644
--- a/tests/integration/renderer/test_external_component.py
+++ b/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() == []