From d4b4ae0a10ea48c70a6ca5abfc73df7f47c90a18 Mon Sep 17 00:00:00 2001
From: Ivana Huckova <ivana.huckova@gmail.com>
Date: Thu, 14 Apr 2022 12:00:06 +0200
Subject: [PATCH] AutoSizeInput: Fix updating of value

---
 .../querybuilder/shared/AutoSizeInput.tsx         | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx b/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx
index a0223f596c7..b5d242a20a1 100644
--- a/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx
+++ b/public/app/plugins/datasource/prometheus/querybuilder/shared/AutoSizeInput.tsx
@@ -11,19 +11,26 @@ export interface Props extends InputProps {
 }
 
 export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
-  const { defaultValue = '', minWidth = 10, maxWidth, onCommitChange, onKeyDown, onBlur, ...restProps } = props;
-  const [value, setValue] = React.useState(defaultValue);
-  const [inputWidth, setInputWidth] = React.useState(minWidth);
+  const { defaultValue, minWidth = 10, maxWidth, onCommitChange, onKeyDown, onBlur, ...restProps } = props;
+  const [value, setValue] = React.useState('');
+  const [inputWidth, setInputWidth] = React.useState(0);
 
   useEffect(() => {
     setInputWidth(getWidthFor(value.toString(), minWidth, maxWidth));
   }, [value, maxWidth, minWidth]);
 
+  useEffect(() => {
+    setInputWidth(minWidth);
+    if (defaultValue) {
+      setValue(defaultValue.toString());
+    }
+  }, [minWidth, defaultValue]);
+
   return (
     <Input
       {...restProps}
       ref={ref}
-      value={value.toString()}
+      value={value}
       onChange={(event) => {
         setValue(event.currentTarget.value);
       }}