From 112c5fa979c53d089c52df6c2bae5cef75e90750 Mon Sep 17 00:00:00 2001
From: Egan Gumiwang Pratama Bisma <egan@hey.com>
Date: Thu, 9 Jan 2025 18:51:06 +0700
Subject: [PATCH] enforce numeric inputs on NumberInput and prevent NaN text
 (#135)

---
 .../reader/components/settings/NumberInput.tsx  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx b/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx
index acba0366..a03c3bc1 100644
--- a/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx
+++ b/apps/readest-app/src/app/reader/components/settings/NumberInput.tsx
@@ -25,11 +25,17 @@ const NumberInput: React.FC<NumberInputProps> = ({
   const numberStep = step || 1;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newValue = e.target.value === '' ? 0 : parseFloat(e.target.value);
-    setLocalValue(newValue);
-    if (!isNaN(newValue)) {
-      const roundedValue = Math.round(newValue * 10) / 10;
-      onChange(Math.max(min, Math.min(max, roundedValue)));
+    const value = e.target.value;
+
+    // Allow empty string or valid numbers without leading zeros
+    if (value === '' || /^[1-9]\d*\.?\d*$|^0?\.?\d*$/.test(value)) {
+      const newValue = value === '' ? 0 : parseFloat(value);
+      setLocalValue(newValue);
+
+      if (!isNaN(newValue)) {
+        const roundedValue = Math.round(newValue * 10) / 10;
+        onChange(Math.max(min, Math.min(max, roundedValue)));
+      }
     }
   };
 
@@ -59,6 +65,7 @@ const NumberInput: React.FC<NumberInputProps> = ({
       <div className='text-base-content flex items-center gap-2'>
         <input
           type='text'
+          inputMode='decimal'
           value={localValue}
           onChange={handleChange}
           onBlur={handleOnBlur}