From 5ad8a9722e217e3bc6d7ad88e90aa12a5ab201d9 Mon Sep 17 00:00:00 2001
From: Erik Sundell <erik.sundell@grafana.com>
Date: Thu, 5 Mar 2020 20:19:43 +0100
Subject: [PATCH] UI: Segment improvements (#22601)

* Trigger onchange in case user has edited a custom option, and then clicked outside the react select dropdown

* The width of the label is calculated so that the react select input field could get the same width. However, the react select input font is slightly wider, so we need to make that width a little bit larget than the label.
---
 .../src/components/Segment/SegmentSelect.tsx       | 14 ++++++++++++--
 .../src/components/Segment/useExpandableLabel.tsx  |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
index e7421b583ec..1f4fc462530 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentSelect.tsx
@@ -23,10 +23,19 @@ export function SegmentSelect<T>({
   noOptionsMessage = '',
   allowCustomValue = false,
 }: React.PropsWithChildren<Props<T>>) {
-  const ref = useRef(null);
+  const ref = useRef<HTMLDivElement>(null);
 
   useClickAway(ref, () => {
-    onClickOutside();
+    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();
+      }
+    }
   });
 
   return (
@@ -37,6 +46,7 @@ export function SegmentSelect<T>({
             width: ${width > 120 ? width : 120}px;
           `
         )}
+        noOptionsMessage={() => noOptionsMessage}
         placeholder=""
         autoFocus={true}
         isOpen={true}
diff --git a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
index 10144be7c42..0649fb4b1d1 100644
--- a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
+++ b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
@@ -11,7 +11,7 @@ export const useExpandableLabel = (initialExpanded: boolean) => {
       onClick={() => {
         setExpanded(true);
         if (ref && ref.current) {
-          setWidth(ref.current.clientWidth);
+          setWidth(ref.current.clientWidth * 1.25);
         }
         if (onClick) {
           onClick();