Allow decimal values in number field (#291)

packages/ui/src/components/records/values/record-number-value.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from 'react';
+
 import { NumberFieldValue, type NumberFieldAttributes } from '@colanode/core';
 import { Input } from '@colanode/ui/components/ui/input';
 import { useRecord } from '@colanode/ui/contexts/record';
@@ -17,33 +19,48 @@ export const RecordNumberValue = ({
     field,
   });
 
+  const [localValue, setLocalValue] = useState<string>(
+    value?.value?.toString() ?? ''
+  );
+
+  useEffect(() => {
+    setLocalValue(value?.value?.toString() ?? '');
+  }, [value?.value]);
+
+  const handleBlur = () => {
+    if (!record.canEdit || readOnly) return;
+
+    const trimmedValue = localValue.trim();
+    if (trimmedValue === '') {
+      clearValue();
+      return;
+    }
+
+    const newValue = parseFloat(trimmedValue);
+    if (isNaN(newValue)) {
+      setLocalValue(value?.value?.toString() ?? '');
+      return;
+    }
+
+    if (newValue === value?.value) {
+      return;
+    }
+
+    setValue({
+      type: 'number',
+      value: newValue,
+    });
+  };
+
   return (
     <Input
-      value={value?.value ?? undefined}
+      value={localValue}
       readOnly={!record.canEdit || readOnly}
       onChange={(e) => {
         if (!record.canEdit || readOnly) return;
-
-        const newStringValue = e.target.value;
-        if (newStringValue === null || newStringValue === '') {
-          clearValue();
-          return;
-        }
-
-        const newValue = parseFloat(newStringValue);
-        if (isNaN(newValue)) {
-          return;
-        }
-
-        if (newValue === value?.value) {
-          return;
-        }
-
-        setValue({
-          type: 'number',
-          value: newValue,
-        });
+        setLocalValue(e.target.value);
       }}
+      onBlur={handleBlur}
       className="flex h-full w-full cursor-pointer flex-row items-center gap-1 border-none p-0 text-sm focus-visible:cursor-text shadow-none"
     />
   );