Issue #395 - Update Validation for Inputs that should be numeric to resolve...

Issue #395 (closed) - Update Validation for Inputs that should be numeric to resolve browser compatibility issues

The issue we are facing is related to how different browsers handle the input[type="number"] field and how they enforce restrictions for numbers. Chrome & Firefox handle validation for these fields differently. When type="number" is set in an input field, the browser automatically restricts input to numeric characters only. As a result, if you try typing a string (e.g., letters), the input won't trigger the onChange event as it does for valid numbers.

Workaround: made the input as text and added validation to ensure the input is correct The validation removes any :

1. letters
2. , or decimals that cause Bad Requests
3. Allowed decimal values only when setting last days/weeks/months

components/searchRanges/SearchRanges.tsx

@@ -36,11 +36,34 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
     setLastTimeUnitValue,
   } = rangesProps;
 
-  const setNumericValue = (value: number, fieldSetter: Function) => {
-    if (!Number.isNaN(value) && value > 0) {
-      fieldSetter(value);
-    } else {
+  // Validate and update numeric values
+  const handleNumericInput = (
+    value: string,
+    fieldSetter: Function,
+    allowDecimal: boolean = false
+  ) => {
+    // If decimals are allowed, preserve the decimal point in the input value
+    let cleanedValue = allowDecimal
+      ? value.replace(/[^0-9.]/g, "") // Allow numbers and decimal point
+      : value.replace(/[^0-9]/g, ""); // Only allow numbers
+
+   // If the decimal is allowed, ensure there is only one decimal point
+    if (allowDecimal && cleanedValue.split(".").length > 2) {
+      // Remove extra decimals, keeping only the first one
+      cleanedValue = cleanedValue.slice(0, cleanedValue.indexOf(".") + 1) + 
+      cleanedValue.split(".").slice(1).join(""); // Remove all decimals after the first one
+    }
+
+    // Limit the value to a maximum of 15 digits
+    if (cleanedValue.length > 15) {
+      cleanedValue = cleanedValue.slice(0, 15);
+    }
+
+    // If the cleaned value is empty, set it to undefined
+    if (cleanedValue === "") {
       fieldSetter(undefined);
+    } else {
+      fieldSetter(cleanedValue); // Invalid input, set to undefined
     }
   };
 
@@ -81,35 +104,35 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
           ))}
         </SelectContent>
       </Select>
+
       {rangeSelectKey === "lastBlocks" && (
         <div className="flex items-center">
           <div className="flex flex-col w-full">
             <Input
               className="w-1/2 border-0 border-b-2 bg-theme"
-              type="number"
+              type="text" // Use type="text" to allow custom validation
               value={lastBlocksValue || ""}
               onChange={(e) =>
-                setNumericValue(Number(e.target.value), setLastBlocksValue)
+                handleNumericInput(e.target.value,setLastBlocksValue)
               }
               placeholder={"Last"}
-              min="0"
             />
           </div>
         </div>
       )}
+
       {rangeSelectKey === "lastTime" && (
         <>
           <div className="flex items-center justify-center">
             <div className="flex flex-col w-full mr-2">
               <Input
-                type="number"
+                type="text"
                 className="bg-theme border-0 border-b-2 text-text"
                 value={lastTimeUnitValue || ""}
                 onChange={(e) =>
-                  setNumericValue(Number(e.target.value), setLastTimeUnitValue)
+                  handleNumericInput(e.target.value,setLastTimeUnitValue,true)
                 }
                 placeholder={"Last"}
-                min="0"
               />
             </div>
             <Select onValueChange={setTimeUnitSelectKey}>
@@ -139,36 +162,36 @@ const SearchRanges: React.FC<SearchRangesProps> = ({
           </div>
         </>
       )}
+
       {rangeSelectKey === "blockRange" && (
         <div className="flex items-center">
           <div className="flex flex-col w-full mr-2">
             <Input
-              type="number"
+              type="text"
               className="bg-theme border-0 border-b-2"
               data-testid="from-block-input"
               value={fromBlock || ""}
               onChange={(e) =>
-                setNumericValue(Number(e.target.value), setFromBlock)
+                handleNumericInput(e.target.value,setFromBlock)
               }
               placeholder="From"
-              min="0"
             />
           </div>
           <div className="flex flex-col w-full">
             <Input
               className="bg-theme border-0 border-b-2"
               data-testid="headblock-number"
-              type="number"
+              type="text"
               value={toBlock || ""}
               onChange={(e) =>
-                setNumericValue(Number(e.target.value), setToBlock)
+                handleNumericInput(e.target.value,setToBlock)
               }
               placeholder={"To"}
-              min={0}
             />
           </div>
         </div>
       )}
+
       {rangeSelectKey === "timeRange" && (
         <div className="flex flex-col mt-5">
           <div className="flex flex-col w-full mb-4">