Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 49 additions & 2 deletions components/lib/inputnumber/InputNumber.js
Original file line number Diff line number Diff line change
Expand Up @@ -213,8 +213,55 @@ export const InputNumber = React.memo(
return null;
};

const addWithPrecision = (base, increment, precision = 10) => {
return Math.round((base + increment) * precision) / precision;
function countDecimals(value) {
if (!isFinite(value)) return 0;

const s = String(value);

// handle exponential notation: e.g. "1e-7"
if (s.toLowerCase().includes('e')) {
const [mantissa, expStr] = s.split('e');
const exp = parseInt(expStr, 10);
const decimalPart = (mantissa.split('.')[1] || '').length;

// If exponent is negative, decimals increase
if (exp < 0) return decimalPart + Math.abs(exp);

// If exponent is positive, decimals shrink
return Math.max(0, decimalPart - exp);
}

// normal decimal
return (s.split('.')[1] || '').length;
}

const addWithPrecision = (base, increment) => {
base = Number(base);
increment = Number(increment);

// invalid inputs → return NaN cleanly
if (!isFinite(base) || !isFinite(increment)) return NaN;

const baseDec = countDecimals(base);
const incDec = countDecimals(increment);

// Choose required decimal precision but cap so factor remains safe
const decimals = Math.min(Math.max(baseDec, incDec), 15);
const factor = Math.pow(10, decimals);

const maxSafe = Number.MAX_SAFE_INTEGER;

// avoid unsafe multiplication
if (Math.abs(base) * factor > maxSafe || Math.abs(increment) * factor > maxSafe) {
const sum = base + increment;
// fallback to a safe rounding
const fallbackFactor = Math.pow(10, 15);

return Math.round(sum * fallbackFactor) / fallbackFactor;
}

// Correct integer math → avoids floating point errors
return Math.round(base * factor + increment * factor) / factor;
};

const repeat = (event, interval, dir) => {
Expand Down
101 changes: 101 additions & 0 deletions components/lib/inputnumber/InputNumber.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import '@testing-library/jest-dom';
import { render, fireEvent } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { InputNumber } from './InputNumber';

function getButtons(container) {
const inc = container.querySelector('[data-pc-section="incrementbutton"]') || container.querySelector('.p-inputnumber-button-up');

const dec = container.querySelector('[data-pc-section="decrementbutton"]') || container.querySelector('.p-inputnumber-button-down');

return { inc, dec };
}

describe('InputNumber decimal precision and stepping', () => {
test('increments correctly with step=0.25', async () => {
const { container } = render(<InputNumber step={0.25} showButtons mode="decimal" />);

const input = container.querySelector('input');
const { inc } = getButtons(container);

await userEvent.click(inc);
expect(Number(input.value)).toBeCloseTo(0.25);

await userEvent.click(inc);
expect(Number(input.value)).toBeCloseTo(0.5);
});

test('handles scientific notation by setting value prop', () => {
const tiny = 1e-7;

const { container, rerender } = render(<InputNumber value={tiny} mode="decimal" />);

const input = container.querySelector('input');

expect(Number(input.value)).toBeCloseTo(tiny);

rerender(<InputNumber value={tiny * 2} mode="decimal" maxFractionDigits={15} />);
expect(Number(input.value)).toBeCloseTo(2e-7);
});

test('handles large decimals (many fraction digits) within precision cap', () => {
const num = 0.123456789012345;

const { container } = render(<InputNumber value={num} mode="decimal" maxFractionDigits={15} />);

const input = container.querySelector('input');

expect(Number(input.value)).toBeCloseTo(num, 12);
});

test('caps precision at safe 15 decimals', () => {
const tooPrecise = 0.1234567890123456;

const { container } = render(<InputNumber value={tooPrecise} mode="decimal" maxFractionDigits={15} />);

const input = container.querySelector('input');

expect(Number(input.value)).toBeCloseTo(0.123456789012346);
});

test('small step accumulation remains precise', async () => {
const { container } = render(<InputNumber step={0.01} showButtons mode="decimal" />);

const input = container.querySelector('input');
const { inc } = getButtons(container);

for (let i = 0; i < 11; i++) await userEvent.click(inc);

expect(Number(input.value)).toBeCloseTo(0.11);
});

test('invalid values (NaN, Infinity) do not break controlled value', () => {
const { container, rerender } = render(<InputNumber value={0} mode="decimal" />);

const input = container.querySelector('input');

rerender(<InputNumber value={Infinity} mode="decimal" />);
expect(Number.isFinite(input.value)).toBe(false);

rerender(<InputNumber value={NaN} mode="decimal" />);
expect(Number.isNaN(Number(input.value))).toBe(true);
});

test('step works after setting initial value programmatically', async () => {
const { container, rerender } = render(<InputNumber value={0.5} step={0.25} showButtons mode="decimal" />);

const input = container.querySelector('input');
const { inc, dec } = getButtons(container);

expect(Number(input.value)).toBeCloseTo(0.5);

await userEvent.click(inc);
expect(Number(input.value)).toBeCloseTo(0.75);

rerender(<InputNumber value={1.0} step={0.25} showButtons mode="decimal" />);

await userEvent.click(dec);
expect(Number(input.value)).toBeCloseTo(0.75);
});
});
Loading