From 527d68d44b6e12b0b1defb3d2e5021d29789e625 Mon Sep 17 00:00:00 2001
From: Nick Partridge <nick.ryan.partridge@gmail.com>
Date: Mon, 16 Sep 2019 09:46:04 -0500
Subject: [PATCH] fix(reactive_chart): fix order of instantiation of onBruchEnd
 callback (#376)

Wait for setState to finish before calling onBrushEnd, in the event the callback triggers a
rerender.

fixes #360
---
 .../react_canvas/reactive_chart.tsx           | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/react_canvas/reactive_chart.tsx b/src/components/react_canvas/reactive_chart.tsx
index d4b9c9dc66..4879c5bebf 100644
--- a/src/components/react_canvas/reactive_chart.tsx
+++ b/src/components/react_canvas/reactive_chart.tsx
@@ -76,6 +76,10 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     },
   };
 
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.onEndBrushing);
+  }
+
   renderBarSeries = (clippings: ContainerConfig): ReactiveChartElementIndex[] => {
     const { geometries, canDataBeAnimated, chartTheme } = this.props.chartStore!;
     if (!geometries) {
@@ -292,8 +296,6 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     let y = 0;
     let width = 0;
     let height = 0;
-    // x = {chartDimensions.left + chartTransform.x};
-    // y = {chartDimensions.top + chartTransform.y};
     if (chartRotation === 0 || chartRotation === 180) {
       x = brushStart.x;
       y = chartDimensions.top + chartTransform.y;
@@ -320,12 +322,17 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
   onEndBrushing = () => {
     window.removeEventListener('mouseup', this.onEndBrushing);
     const { brushStart, brushEnd } = this.state;
-    this.props.chartStore!.onBrushEnd(brushStart, brushEnd);
-    this.setState(() => ({
-      brushing: false,
-      brushStart: { x: 0, y: 0 },
-      brushEnd: { x: 0, y: 0 },
-    }));
+
+    this.setState(
+      () => ({
+        brushing: false,
+        brushStart: { x: 0, y: 0 },
+        brushEnd: { x: 0, y: 0 },
+      }),
+      () => {
+        this.props.chartStore!.onBrushEnd(brushStart, brushEnd);
+      },
+    );
   };
   onBrushing = (event: { evt: MouseEvent }) => {
     if (!this.state.brushing) {