From 34e7d48ca680c3869f102ad22176c2a25d9951a3 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 7 Oct 2022 14:19:52 +0200
Subject: [PATCH] Form validation problem in table panel option (column width &
 minimum column width) (#56452) (#56547)

Co-authored-by: gitstart <gitstart@users.noreply.github.com>
Co-authored-by: gitstart <gitstart@gitstart.com>
Co-authored-by: Rubens Rafael <70234898+RubensRafael@users.noreply.github.com>
Co-authored-by: Rafael Toledo <87545086+Toledodev@users.noreply.github.com>
Co-authored-by: Matheus Muniz <87545749+matheusmuniz03@users.noreply.github.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Matheus Muniz <matheusmuniz100@hotmail.com>
Co-authored-by: Nitesh Singh <nitesh.singh@gitstart.dev>
Co-authored-by: Matheus Benini Ferreira <88898100+MatheusBeniniF@users.noreply.github.com>
Co-authored-by: Murilo Amaral <87545137+MuriloAmarals@users.noreply.github.com>
(cherry picked from commit 0eb3afbd14adfc143e4dd3d872b8b3a232852c87)

Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>
---
 .../core/components/OptionsUI/NumberInput.tsx | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/public/app/core/components/OptionsUI/NumberInput.tsx b/public/app/core/components/OptionsUI/NumberInput.tsx
index 0631853b5d0..2cd0007b0c7 100644
--- a/public/app/core/components/OptionsUI/NumberInput.tsx
+++ b/public/app/core/components/OptionsUI/NumberInput.tsx
@@ -45,44 +45,46 @@ export class NumberInput extends PureComponent<Props, State> {
   }
 
   updateValue = () => {
-    let value: number | undefined = undefined;
     const txt = this.inputRef.current?.value;
-    if (txt?.length) {
-      value = +txt;
-      if (isNaN(value)) {
-        return;
+    let corrected = false;
+    let newValue = '';
+    const min = this.props.min;
+    const max = this.props.max;
+    const currentValue = txt && +txt;
+
+    if (currentValue) {
+      if (!Number.isNaN(currentValue)) {
+        if (min != null && currentValue < min) {
+          newValue = min.toString();
+          corrected = true;
+        } else if (max != null && currentValue > max) {
+          newValue = max.toString();
+          corrected = true;
+        } else {
+          newValue = txt;
+        }
+      }
+
+      this.setState({
+        text: newValue || '',
+        inputCorrected: corrected,
+      });
+
+      if (corrected) {
+        this.updateValueDebounced();
+      }
+
+      if (!isNaN(currentValue) && currentValue !== this.props.value) {
+        this.props.onChange(currentValue);
       }
-    }
-    if (value !== this.props.value) {
-      this.props.onChange(value);
-    }
-    if (this.state.inputCorrected) {
-      this.setState({ inputCorrected: false });
     }
   };
 
   updateValueDebounced = debounce(this.updateValue, 500); // 1/2 second delay
 
   onChange = (e: React.FocusEvent<HTMLInputElement>) => {
-    let newValue: string | undefined = undefined;
-    let corrected = false;
-    const min = this.props.min;
-    const max = this.props.max;
-    const currValue = e.currentTarget.valueAsNumber;
-    if (!Number.isNaN(currValue)) {
-      if (min != null && currValue < min) {
-        newValue = min.toString();
-        corrected = true;
-      } else if (max != null && currValue > max) {
-        newValue = max.toString();
-        corrected = true;
-      } else {
-        newValue = e.currentTarget.value;
-      }
-    }
     this.setState({
-      text: newValue ? newValue : '',
-      inputCorrected: corrected,
+      text: e.currentTarget.value,
     });
     this.updateValueDebounced();
   };