Bug: Resize on hidden graph divs causes Error

[ghost]

Discussion: https://community.plot.ly/t/dynamically-change-responsive-layout/23002
Repo sample: https://codesandbox.io/s/9qy1p1k8jy

Error:

Error: Resize must be passed a displayed plot div element.
    at eval (plotly-basic.js:59636)
    at new Promise (<anonymous>)
    at Object.plots.resize (plotly-basic.js:59629)
    at gd._responsiveChartHandler (plotly-basic.js:41558)

[etpinard]

Thanks for posting!

Here's the problematic block:

plotly.js/src/plots/plots.js

Lines 84 to 86 in 9340f26

	if(!gd || isHidden(gd)) {
	reject(new Error('Resize must be passed a displayed plot div element.'));
	}

Rejecting the promise when calling Plotly.Plots.resize(gd) seems fine, but perhaps we could catch it in

plotly.js/src/plot_api/plot_api.js

Line 187 in 9340f26

gd._responsiveChartHandler = function() { Plots.resize(gd); };

so that graphs with {responsize: true} don't results in a bunch of somewhat unhelpful error logs.

@antoinerg I'd be interesting in hearing your thoughts on this.

[antoinerg]

I think that if the element is not visible, we could silently ignore the error.

Note that you will also get this error if plots are not removed with Plotly.purge. We could definitely catch the error in the responsive handler and then remove the event listener if the div element is not in the DOM anymore. Essentially, plotly.js would do a clean up if needed.

cc @etpinard

[antoinerg]

Updated comment #3866 (comment) above ⬆️

[etpinard]

Let's try to squeeze this one in v1.49.0

[antoinerg]

@etpinard I guess we have two options here:

1- Ignore all rejected promises

gd._responsiveChartHandler = function() { Plots.resize(gd).catch(Lib.noop); };

2- Do not call resize if div is hidden

gd._responsiveChartHandler = function() { if(!isHidden(gd)) Plots.resize(gd); };