From 253162e84ccad504e110cb30479bb09325d9e4ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ne=C4=8Das?= Date: Fri, 12 Jul 2019 17:22:43 +0200 Subject: [PATCH 1/2] Fixes #27292 - workaround for c3 destroy issue There is a known issue in react-c3js that can lead to the charts to disappear due to some race condition during component unmounting/destroy phase https://github.com/bcbcarl/react-c3js/issues/22. Delaying the actual destroy a bit seems to help with workarounding the issue. --- webpack/ForemanTasks/Components/Chart/Chart.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/webpack/ForemanTasks/Components/Chart/Chart.js b/webpack/ForemanTasks/Components/Chart/Chart.js index bb4df516b..14d0e1ff2 100644 --- a/webpack/ForemanTasks/Components/Chart/Chart.js +++ b/webpack/ForemanTasks/Components/Chart/Chart.js @@ -38,7 +38,12 @@ class C3Chart extends React.Component { destroyChart() { try { - this.chart = this.chart.destroy(); + // A workaround for a case, where the chart might be still in transition + // phase while unmounting/destroying - destroying right away leads + // to issue described in https://github.com/bcbcarl/react-c3js/issues/22. + // Delaying the destroy a bit seems to resolve the issue. + setTimeout(this.chart.destroy, 1000); + this.chart = null; } catch (err) { throw new Error('Internal C3 error', err); } From 669969af3e8cba718049fa872eee1b70cd3bcf14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ivan=20Ne=C4=8Das?= Date: Mon, 15 Jul 2019 13:38:44 +0200 Subject: [PATCH 2/2] Refs #27292 - Add note about no need for explicit bind --- webpack/ForemanTasks/Components/Chart/Chart.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/webpack/ForemanTasks/Components/Chart/Chart.js b/webpack/ForemanTasks/Components/Chart/Chart.js index 14d0e1ff2..98f3ad515 100644 --- a/webpack/ForemanTasks/Components/Chart/Chart.js +++ b/webpack/ForemanTasks/Components/Chart/Chart.js @@ -42,6 +42,8 @@ class C3Chart extends React.Component { // phase while unmounting/destroying - destroying right away leads // to issue described in https://github.com/bcbcarl/react-c3js/issues/22. // Delaying the destroy a bit seems to resolve the issue. + // The chart API methods are already bind explicitly, therefore we don't need + // any special handling when passing the function. setTimeout(this.chart.destroy, 1000); this.chart = null; } catch (err) {