diff --git a/packages/ui/src/components/records/values/record-number-value.tsx b/packages/ui/src/components/records/values/record-number-value.tsx index 74bb2816..023b248a 100644 --- a/packages/ui/src/components/records/values/record-number-value.tsx +++ b/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( + 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 ( { 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" /> );