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