From 3778e9bbbd8bb8c47d903e42ed670d6ed5d06055 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Fri, 16 Jul 2021 08:39:06 +0200
Subject: [PATCH] SegmentSelect: Fix closing the menu on click out (#36816)

---
 .../src/components/Segment/SegmentSelect.tsx  | 26 +++++++++----------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
index e3efc8d15f1..aecf04560e9 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
@@ -1,5 +1,4 @@
 import React, { HTMLProps, useRef } from 'react';
-import useClickAway from 'react-use/lib/useClickAway';
 import { SelectableValue } from '@grafana/data';
 import { Select } from '../Select/Select';
 import { useTheme2 } from '../../themes/ThemeContext';
@@ -29,19 +28,6 @@ export function SegmentSelect<T>({
   const ref = useRef<HTMLDivElement>(null);
   const theme = useTheme2();
 
-  useClickAway(ref, () => {
-    if (ref && ref.current) {
-      // https://github.com/JedWatson/react-select/issues/188#issuecomment-279240292
-      // Unfortunately there's no other way of retrieving the (not yet) created new option
-      const input = ref.current.querySelector('input[id^="react-select-"]') as HTMLInputElement;
-      if (input && input.value) {
-        onChange({ value: input.value as any, label: input.value });
-      } else {
-        onClickOutside();
-      }
-    }
-  });
-
   let width = widthPixels > 0 ? widthPixels / theme.spacing.gridSize : undefined;
 
   return (
@@ -55,6 +41,18 @@ export function SegmentSelect<T>({
         onChange={onChange}
         options={options}
         value={value}
+        onCloseMenu={() => {
+          if (ref && ref.current) {
+            // https://github.com/JedWatson/react-select/issues/188#issuecomment-279240292
+            // Unfortunately there's no other way of retrieving the value (not yet) created new option
+            const input = ref.current.querySelector('input[id^="react-select-"]') as HTMLInputElement;
+            if (input && input.value) {
+              onChange({ value: input.value as any, label: input.value });
+            } else {
+              onClickOutside();
+            }
+          }
+        }}
         allowCustomValue={allowCustomValue}
       />
     </div>