From 07b9735263c08fee944b1122c3d8a533c17d2c8e Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 25 Jan 2019 14:07:22 +0100
Subject: [PATCH] Do not update color picker popover position on tab change

Position update caused tabs to move up and down. This led to confusing user experience, as tabs position was dependent on tab's content.
---
 .../ColorPicker/ColorPickerPopover.tsx        | 21 +++++++------------
 1 file changed, 8 insertions(+), 13 deletions(-)

diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
index 06b90e6ebc4..d2937a1caba 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorPickerPopover.tsx
@@ -46,13 +46,8 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
     changeHandler(getColorFromHexRgbOrName(color, theme));
   };
 
-  handleTabChange = (tab: PickerType | keyof T, updatePopperPosition?: () => void) => {
-    return () =>
-      this.setState({ activePicker: tab }, () => {
-        if (updatePopperPosition) {
-          updatePopperPosition();
-        }
-      });
+  handleTabChange = (tab: PickerType | keyof T) => {
+    return () => this.setState({ activePicker: tab });
   };
 
   renderPicker = () => {
@@ -82,7 +77,7 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
     });
   };
 
-  renderCustomPickerTabs = (updatePopperPosition?: () => void) => {
+  renderCustomPickerTabs = () => {
     const { customPickers } = this.props;
 
     if (!customPickers) {
@@ -95,7 +90,7 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
           return (
             <div
               className={this.getTabClassName(key)}
-              onClick={this.handleTabChange(key, updatePopperPosition)}
+              onClick={this.handleTabChange(key)}
               key={key}
             >
               {customPickers[key].name}
@@ -107,7 +102,7 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
   };
 
   render() {
-    const { theme, updatePopperPosition } = this.props;
+    const { theme } = this.props;
     const colorPickerTheme = theme || GrafanaTheme.Dark;
 
     return (
@@ -115,17 +110,17 @@ export class ColorPickerPopover<T extends CustomPickersDescriptor> extends React
         <div className="ColorPickerPopover__tabs">
           <div
             className={this.getTabClassName('palette')}
-            onClick={this.handleTabChange('palette', updatePopperPosition)}
+            onClick={this.handleTabChange('palette')}
           >
             Colors
           </div>
           <div
             className={this.getTabClassName('spectrum')}
-            onClick={this.handleTabChange('spectrum', updatePopperPosition)}
+            onClick={this.handleTabChange('spectrum')}
           >
             Custom
           </div>
-          {this.renderCustomPickerTabs(updatePopperPosition)}
+          {this.renderCustomPickerTabs()}
         </div>
 
         <div className="ColorPickerPopover__content">{this.renderPicker()}</div>