From e2a5e39b0bb02c70640b71da9b1bc5191427ac92 Mon Sep 17 00:00:00 2001
From: Emir Karabeg <emirkarabeg@berkeley.edu>
Date: Wed, 12 Feb 2025 19:37:02 -0800
Subject: [PATCH] Fix: range input experience

---
 .../sub-block/components/eval-input.tsx       | 31 ++++++++++++++-----
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx b/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx
index 2646dacd1e..92978c862a 100644
--- a/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx
+++ b/app/w/[id]/components/workflow-block/components/sub-block/components/eval-input.tsx
@@ -75,8 +75,25 @@ export function EvalInput({ blockId, subBlockId }: EvalInputProps) {
   }
 
   const updateRange = (id: string, field: 'min' | 'max', value: string) => {
-    const numValue = parseFloat(value)
-    if (isNaN(numValue)) return
+    setValue(
+      metrics.map((metric) =>
+        metric.id === id
+          ? {
+              ...metric,
+              range: {
+                ...metric.range,
+                [field]: value,
+              },
+            }
+          : metric
+      )
+    )
+  }
+
+  const handleRangeBlur = (id: string, field: 'min' | 'max', value: string) => {
+    // Allow any number including negatives, just remove non-numeric characters except - and .
+    const sanitizedValue = value.replace(/[^\d.-]/g, '')
+    const numValue = parseFloat(sanitizedValue)
 
     setValue(
       metrics.map((metric) =>
@@ -85,7 +102,7 @@ export function EvalInput({ blockId, subBlockId }: EvalInputProps) {
               ...metric,
               range: {
                 ...metric.range,
-                [field]: numValue,
+                [field]: !isNaN(numValue) ? numValue : 0,
               },
             }
           : metric
@@ -206,20 +223,20 @@ export function EvalInput({ blockId, subBlockId }: EvalInputProps) {
               <div className="space-y-1">
                 <Label>Min Value</Label>
                 <Input
-                  type="number"
+                  type="text"
                   value={metric.range.min}
                   onChange={(e) => updateRange(metric.id, 'min', e.target.value)}
-                  step={0.1}
+                  onBlur={(e) => handleRangeBlur(metric.id, 'min', e.target.value)}
                   className="text-muted-foreground placeholder:text-muted-foreground/50"
                 />
               </div>
               <div className="space-y-1">
                 <Label>Max Value</Label>
                 <Input
-                  type="number"
+                  type="text"
                   value={metric.range.max}
                   onChange={(e) => updateRange(metric.id, 'max', e.target.value)}
-                  step={0.1}
+                  onBlur={(e) => handleRangeBlur(metric.id, 'max', e.target.value)}
                   className="text-muted-foreground placeholder:text-muted-foreground/50"
                 />
               </div>