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.

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}

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();