[Visualize] Coloring tooltips in Pie are not properly positioned

elastic · Jan 14, 2022 · 5b30213 · 5b30213
1 parent faa2afb
commit 5b30213
Showing 1 changed file with 22 additions and 28 deletions.
diff --git a/src/plugins/chart_expressions/expression_pie/public/utils/get_color_picker.tsx b/src/plugins/chart_expressions/expression_pie/public/utils/get_color_picker.tsx
@@ -6,10 +6,10 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback } from 'react';
+import React from 'react';
 import Color from 'color';
 import { LegendColorPicker, Position } from '@elastic/charts';
-import { PopoverAnchorPosition, EuiPopover, EuiOutsideClickDetector } from '@elastic/eui';
+import { PopoverAnchorPosition, EuiWrappingPopover } from '@elastic/eui';
 import type { DatatableRow } from '../../../../expressions/public';
 import type { PersistedState } from '../../../../visualizations/public';
 import { ColorPicker } from '../../../../charts/public';
@@ -81,38 +81,32 @@ export const getColorPicker =
       keyDownEventOn = true;
     };
 
-    const handleOutsideClick = useCallback(() => {
-      onClose?.();
-    }, [onClose]);
-
     if (!distinctColors) {
       const enablePicker =
         isOnInnerLayer(bucketColumns[0], data, seriesName) || !bucketColumns[0].id;
       if (!enablePicker) return null;
     }
     const hexColor = new Color(color).hex();
     return (
-      <EuiOutsideClickDetector onOutsideClick={handleOutsideClick}>
-        <EuiPopover
-          isOpen
-          ownFocus
-          display="block"
-          button={anchor}
-          anchorPosition={getAnchorPosition(legendPosition)}
-          closePopover={onClose}
-          panelPaddingSize="s"
-        >
-          <ColorPicker
-            color={palette === 'kibana_palette' ? hexColor : hexColor.toLowerCase()}
-            onChange={handleChange}
-            label={seriesName}
-            maxDepth={bucketColumns.length}
-            layerIndex={getLayerIndex(seriesName, data, bucketColumns)}
-            useLegacyColors={palette === 'kibana_palette'}
-            colorIsOverwritten={colorIsOverwritten}
-            onKeyDown={onKeyDown}
-          />
-        </EuiPopover>
-      </EuiOutsideClickDetector>
+      <EuiWrappingPopover
+        isOpen
+        ownFocus
+        display="block"
+        button={anchor}
+        anchorPosition={getAnchorPosition(legendPosition)}
+        closePopover={onClose}
+        panelPaddingSize="s"
+      >
+        <ColorPicker
+          color={palette === 'kibana_palette' ? hexColor : hexColor.toLowerCase()}
+          onChange={handleChange}
+          label={seriesName}
+          maxDepth={bucketColumns.length}
+          layerIndex={getLayerIndex(seriesName, data, bucketColumns)}
+          useLegacyColors={palette === 'kibana_palette'}
+          colorIsOverwritten={colorIsOverwritten}
+          onKeyDown={onKeyDown}
+        />
+      </EuiWrappingPopover>
     );
   };