fix: handle chart click as mouseUp to prevent click while brushing (#269

)
elastic · Jul 24, 2019 · 7881b8d · 7881b8d
1 parent f196560
commit 7881b8d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/components/react_canvas/reactive_chart.tsx b/src/components/react_canvas/reactive_chart.tsx
@@ -293,7 +293,6 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
   };
   onStartBrusing = (event: { evt: MouseEvent }) => {
     window.addEventListener('mouseup', this.onEndBrushing);
-    this.props.chartStore!.onBrushStart();
     const { brushExtent } = this.props.chartStore!;
     const point = getPoint(event.evt, brushExtent);
     this.setState(() => ({
@@ -316,6 +315,9 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
     if (!this.state.brushing) {
       return;
     }
+    if (!this.props.chartStore!.isBrushing.get()) {
+      this.props.chartStore!.onBrushStart();
+    }
     const { brushExtent } = this.props.chartStore!;
     const point = getPoint(event.evt, brushExtent);
     this.setState(() => ({
@@ -420,7 +422,10 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
         onMouseLeave={() => {
           setCursorPosition(-1, -1);
         }}
-        onClick={() => {
+        onMouseUp={() => {
+          if (this.props.chartStore!.isBrushing.get()) {
+            return;
+          }
           this.props.chartStore!.handleChartClick();
         }}
         className={className}

diff --git a/stories/interactions.tsx b/stories/interactions.tsx
@@ -442,7 +442,11 @@ storiesOf('Interactions', module)
     const oneDay = 1000 * 60 * 60 * 24;
     return (
       <Chart className={'story-chart'}>
-        <Settings debug={boolean('debug', false)} onBrushEnd={action('onBrushEnd')} />
+        <Settings
+          debug={boolean('debug', false)}
+          onBrushEnd={action('onBrushEnd')}
+          onElementClick={action('onElementClick')}
+        />
         <Axis
           id={getAxisId('bottom')}
           position={Position.Bottom}