UI: Segment Input change (#20925)

* Add input segment

* Rename story

* Cleanup

* Fix lint error

* More cleanup

* Use measure text util

* Keep value in local state

packages/grafana-ui/src/components/Segment/SegmentInput.tsx

@@ -12,18 +12,21 @@ export interface SegmentInputProps<T> extends SegmentProps<T> {
 const FONT_SIZE = 14;
 const FONT_SIZE = 14;
 
 
 export function SegmentInput<T>({
 export function SegmentInput<T>({
-  value,
+  value: initialValue,
   onChange,
   onChange,
   Component,
   Component,
   className,
   className,
 }: React.PropsWithChildren<SegmentInputProps<T>>) {
 }: React.PropsWithChildren<SegmentInputProps<T>>) {
   const ref = useRef(null);
   const ref = useRef(null);
-  const [inputWidth, setInputWidth] = useState<number>(measureText(value.toString(), FONT_SIZE).width);
+  const [value, setValue] = useState<number | string>(initialValue);
+  const [inputWidth, setInputWidth] = useState<number>(measureText(initialValue.toString(), FONT_SIZE).width);
   const [Label, , expanded, setExpanded] = useExpandableLabel(false);
   const [Label, , expanded, setExpanded] = useExpandableLabel(false);
   useClickAway(ref, () => setExpanded(false));
   useClickAway(ref, () => setExpanded(false));
 
 
   if (!expanded) {
   if (!expanded) {
-    return <Label Component={Component || <a className={cx('gf-form-label', 'query-part', className)}>{value}</a>} />;
+    return (
+      <Label Component={Component || <a className={cx('gf-form-label', 'query-part', className)}>{initialValue}</a>} />
+    );
   }
   }
 
 
   const inputWidthStyle = css`
   const inputWidthStyle = css`
@@ -39,10 +42,18 @@ export function SegmentInput<T>({
       onChange={item => {
       onChange={item => {
         const { width } = measureText(item.target.value, FONT_SIZE);
         const { width } = measureText(item.target.value, FONT_SIZE);
         setInputWidth(width);
         setInputWidth(width);
-        onChange(item.target.value);
+        setValue(item.target.value);
+      }}
+      onBlur={() => {
+        setExpanded(false);
+        onChange(value);
+      }}
+      onKeyDown={e => {
+        if ([13, 27].includes(e.keyCode)) {
+          setExpanded(false);
+          onChange(value);
+        }
       }}
       }}
-      onBlur={() => setExpanded(false)}
-      onKeyDown={e => [13, 27].includes(e.keyCode) && setExpanded(false)}
     />
     />
   );
   );
 }
 }