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 0eb3afb)

Co-authored-by: GitStart <1501599+gitstart@users.noreply.github.com>

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