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() == []