diff --git a/CHANGELOG.md b/CHANGELOG.md index 2b85deb17a..0821acdcea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/). - [#3415](https://github.com/plotly/dash/pull/3415) Fix the error triggered when only a single no_update is returned for client-side callback functions with multiple Outputs. Fix [#3366](https://github.com/plotly/dash/issues/3366) - [#3416](https://github.com/plotly/dash/issues/3416) Fix DeprecationWarning in dash/_jupyter.py by migrating from deprecated ipykernel.comm.Comm to comm module - [#3488](https://github.com/plotly/dash/pull/3488) Fix pkgutil.find_loader removal in Python 3.14 +- [#3496](https://github.com/plotly/dash/pull/3496) Fix dcc.Graph infinite resize loop ## [3.2.0] - 2025-07-31 diff --git a/components/dash-core-components/src/fragments/Graph.react.js b/components/dash-core-components/src/fragments/Graph.react.js index c33feebf6f..fdff615190 100644 --- a/components/dash-core-components/src/fragments/Graph.react.js +++ b/components/dash-core-components/src/fragments/Graph.react.js @@ -393,6 +393,7 @@ class PlotlyGraph extends Component { gd.classList.add('dash-graph--pending'); + // Calling resize enables layout.autosize in plotly.js Plotly.Plots.resize(gd) .catch(() => {}) .finally(() => gd.classList.remove('dash-graph--pending')); @@ -457,27 +458,6 @@ class PlotlyGraph extends Component { }); } - getStyle() { - const {responsive} = this.props; - let {style} = this.props; - - // When there is no forced responsive style, return the original style property - if (!responsive) { - return style; - } - - // Otherwise, if the height is not set, we make the graph size equal to the parent one - if (!style) { - style = {}; - } - - if (!style.height) { - return Object.assign({height: '100%'}, style); - } - - return style; - } - componentDidMount() { const p = this.plot(this.props); this._queue = this.amendTraces(p, {}, this.props); @@ -536,46 +516,33 @@ class PlotlyGraph extends Component { } render() { - const {className, id, loading_state} = this.props; - const style = this.getStyle(); - - if (window.dash_component_api) { - return ( - - -
- - ); + const {className, id, loading_state, style = {}} = this.props; + if (this.isResponsive(this.props)) { + style.height ||= '100%'; } + + let Container = LoadingElement; + const containerProps = { + className, + id, + key: id, + ref: this.parentElement, + style, + }; + if (!window.dash_component_api) { + Container = 'div'; + containerProps['data-dash-is-loading'] = + loading_state?.is_loading || undefined; + } + return ( -
+
-
+
); } }