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