fix(NumberInput): disable rounding decimal to integer without passed …

…step
gravity-ui · Jan 14, 2025 · 8a0b044 · 8a0b044
1 parent a46245e
commit 8a0b044
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/src/components/NumberInput/NumberInput.tsx b/src/components/NumberInput/NumberInput.tsx
@@ -89,7 +89,7 @@ export const NumberInput = React.forwardRef<HTMLSpanElement, NumberInputProps>(f
         min: externalMin,
         max: externalMax,
         shiftMultiplier: externalShiftMultiplier = 10,
-        step: externalStep = 1,
+        step: externalStep,
         size = 'm',
         view = 'normal',
         disabled,
@@ -136,7 +136,7 @@ export const NumberInput = React.forwardRef<HTMLSpanElement, NumberInputProps>(f
         });
     }, [value]);
 
-    const clamp = true;
+    const clamp = !(allowDecimal && !externalStep);
 
     const safeValue = value ?? 0;
 

diff --git a/src/components/NumberInput/__tests__/NumberInput.test.tsx b/src/components/NumberInput/__tests__/NumberInput.test.tsx
@@ -223,6 +223,18 @@ describe('NumberInput input', () => {
 
             expect(handleUpdate).toHaveBeenLastCalledWith(6);
         });
+        it('does not clamp decimal without defined step on blur', async () => {
+            const handleUpdate = jest.fn();
+            render(<NumberInput value={7.123} allowDecimal onUpdate={handleUpdate} />);
+            const input = getInput();
+
+            act(() => {
+                input.focus();
+                input.blur();
+            });
+
+            expect(getInput()).toHaveValue('7.123');
+        });
         it('swaps min/max if max < min', async () => {
             const handleUpdate = jest.fn();
             render(<NumberInput min={1000} max={-1} value={100000000} onUpdate={handleUpdate} />);

diff --git a/src/components/NumberInput/utils.ts b/src/components/NumberInput/utils.ts
@@ -59,7 +59,7 @@ function roundIfNecessary(value: number, allowDecimal: boolean) {
 interface VariablesProps {
     min: number | undefined;
     max: number | undefined;
-    step: number;
+    step: number | undefined;
     shiftMultiplier: number;
     value: number | null | undefined;
     defaultValue: number | null | undefined;
@@ -76,7 +76,7 @@ export function getInternalState(props: VariablesProps): {
     const {
         min: externalMin,
         max: externalMax,
-        step: externalStep,
+        step: externalStep = 1,
         shiftMultiplier: externalShiftMultiplier,
         value: externalValue,
         allowDecimal,