diff --git a/src/components/InputNumber/index.tsx b/src/components/InputNumber/index.tsx index 0a33b6457..b68f69bc4 100644 --- a/src/components/InputNumber/index.tsx +++ b/src/components/InputNumber/index.tsx @@ -78,6 +78,7 @@ export const InputNumber = forwardRef( }); const [isFocused, setIsFocused] = useState(false); const tmpValueRef = useRef(value ?? defaultValue ?? null); + const [rawInput, setRawInput] = useState(undefined); const handleOnKeyDown = (e: KeyboardEvent) => { const v = tmpValueRef.current; @@ -86,10 +87,20 @@ export const InputNumber = forwardRef( onChange(v); } if (e.key === 'ArrowUp') { - onChange(clamp((v ?? 0) + (e.shiftKey ? bigStep : step), { min, max })); + const newValue = clamp((v ?? 0) + (e.shiftKey ? bigStep : step), { + min, + max, + }); + setRawInput(String(newValue)); + onChange(newValue); } if (e.key === 'ArrowDown') { - onChange(clamp((v ?? 0) - (e.shiftKey ? bigStep : step), { min, max })); + const newValue = clamp((v ?? 0) - (e.shiftKey ? bigStep : step), { + min, + max, + }); + onChange(newValue); + setRawInput(String(newValue)); } rest.onKeyDown?.(e); }; @@ -104,10 +115,10 @@ export const InputNumber = forwardRef( prefix: `${currency ? currencyPrefix : ''}${prefix}`, onValueChange: (values) => { tmpValueRef.current = values.floatValue ?? null; + setRawInput(values.value); // Prevent -0 to be replaced with 0 when input is controlled if (values.floatValue === 0) return; - onChange(values.floatValue ?? null); }, } satisfies ComponentProps; @@ -120,7 +131,7 @@ export const InputNumber = forwardRef( pe={showButtons ? 8 : undefined} {...rest} {...getNumericFormatOptions} - value={value === undefined ? undefined : value ?? ''} + value={rawInput ?? (value === undefined ? undefined : value ?? '')} defaultValue={defaultValue ?? undefined} placeholder={ typeof placeholder === 'number'