[number field] Respect rounding mode on blur

Author: atomiks

packages/react/src/number-field/input/NumberFieldInput.test.tsx

@@ -585,6 +585,61 @@ describe('<NumberField.Input />', () => {
     expect(onValueChange.mock.calls[0][0]).toBe(1.23);
   });
 
+  async function renderControlledNumberField(
+    format: Intl.NumberFormatOptions,
+    locale: Intl.LocalesArgument = 'en-US',
+  ) {
+    const onValueChange = vi.fn();
+
+    function Controlled() {
+      const [value, setValue] = React.useState<number | null>(null);
+      return (
+        <NumberField.Root
+          value={value}
+          onValueChange={(nextValue) => {
+            onValueChange(nextValue);
+            setValue(nextValue);
+          }}
+          format={format}
+          locale={locale}
+        >
+          <NumberField.Input />
+        </NumberField.Root>
+      );
+    }
+
+    const { user } = await render(<Controlled />);
+    const input = screen.getByRole('textbox');
+
+    await act(async () => {
+      input.focus();
+    });
+
+    return { input, onValueChange, user };
+  }
+
+  it.each([
+    ['en-US', '1.239'],
+    ['fr-FR', '1,239'],
+    ['ar-EG', '١٫٢٣٩'],
+  ] as const)(
+    'should respect roundingMode when rounding to explicit maximumFractionDigits on blur in %s',
+    async (locale, inputText) => {
+      const format = {
+        maximumFractionDigits: 2,
+        roundingMode: 'floor',
+      };
+
+      const { input, onValueChange, user } = await renderControlledNumberField(format, locale);
+
+      await user.keyboard(inputText);
+      fireEvent.blur(input);
+
+      expect(onValueChange.mock.lastCall?.[0]).toBe(1.23);
+      expect(input).toHaveValue(new Intl.NumberFormat(locale, format).format(1.239));
+    },
+  );
+
   it('should not throw on blur when format uses roundingIncrement with fixed fraction digits', async () => {
     const format = {
       minimumFractionDigits: 1,
@@ -611,6 +666,36 @@ describe('<NumberField.Input />', () => {
     expect(input).toHaveValue(expectedValue);
   });
 
+  it.each([
+    [
+      'percent',
+      {
+        style: 'percent',
+        maximumFractionDigits: 2,
+        roundingMode: 'floor',
+      },
+      0.0123,
+    ],
+    [
+      'unit percent',
+      {
+        style: 'unit',
+        unit: 'percent',
+        maximumFractionDigits: 2,
+        roundingMode: 'floor',
+      },
+      1.23,
+    ],
+  ] as const)('should round %s values on blur', async (_, format, expectedValue) => {
+    const { input, onValueChange, user } = await renderControlledNumberField(format);
+
+    await user.keyboard('1.239%');
+    fireEvent.blur(input);
+
+    expect(onValueChange.mock.lastCall?.[0]).toBe(expectedValue);
+    expect(input).toHaveValue('1.23%');
+  });
+
   it('should round to step precision on blur when step implies precision constraints', async () => {
     const onValueChange = vi.fn();
 

packages/react/src/number-field/input/NumberFieldInput.tsx

@@ -31,6 +31,7 @@ import {
 import { formatNumber, formatNumberMaxPrecision } from '../../utils/formatNumber';
 import { useValueChanged } from '../../internals/useValueChanged';
 import { REASONS } from '../../internals/reasons';
+import { roundToFractionDigits } from '../utils/validate';
 
 const stateAttributesMapping = {
   ...fieldValidityMapping,
@@ -189,7 +190,7 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
       const maxFrac = formatOptions?.maximumFractionDigits;
       const committed =
         hasExplicitPrecision && typeof maxFrac === 'number'
-          ? Number(parsedValue.toFixed(maxFrac))
+          ? roundToFractionDigits(parsedValue, maxFrac, formatOptions)
           : parsedValue;
 
       const nextEventDetails = createGenericEventDetails(REASONS.inputBlur, event.nativeEvent);

packages/react/src/number-field/utils/validate.test.ts

@@ -25,6 +25,52 @@ describe('NumberField validate', () => {
       expect(removeFloatingPointErrors(0.2 + 0.1, { maximumFractionDigits: 1 })).toBe(0.3);
     });
 
+    it('respects roundingMode when maximumFractionDigits is provided', () => {
+      expect(
+        removeFloatingPointErrors(1.239, {
+          maximumFractionDigits: 2,
+          roundingMode: 'floor',
+        }),
+      ).toBe(1.23);
+    });
+
+    it('rounds percent values at display scale when maximumFractionDigits is provided', () => {
+      expect(
+        removeFloatingPointErrors(0.01236, {
+          style: 'percent',
+          maximumFractionDigits: 2,
+        }),
+      ).toBe(0.0124);
+      expect(
+        removeFloatingPointErrors(0.01239, {
+          style: 'percent',
+          maximumFractionDigits: 2,
+          roundingMode: 'floor',
+        }),
+      ).toBe(0.0123);
+    });
+
+    it('does not scale unit percent values when maximumFractionDigits is provided', () => {
+      expect(
+        removeFloatingPointErrors(1.239, {
+          style: 'unit',
+          unit: 'percent',
+          maximumFractionDigits: 2,
+          roundingMode: 'floor',
+        }),
+      ).toBe(1.23);
+    });
+
+    it('respects roundingIncrement when maximumFractionDigits is provided', () => {
+      expect(
+        removeFloatingPointErrors(1.26, {
+          minimumFractionDigits: 1,
+          maximumFractionDigits: 1,
+          roundingIncrement: 5,
+        }),
+      ).toBe(1.5);
+    });
+
     it('returns 1000 for 1000, ignoring grouping', () => {
       expect(removeFloatingPointErrors(1000)).toBe(1000);
     });

packages/react/src/number-field/utils/validate.ts

@@ -3,7 +3,13 @@ import { getFormatter } from '../../utils/formatNumber';
 
 const STEP_EPSILON_FACTOR = 1e-10;
 
-function getFractionDigits(format?: Intl.NumberFormatOptions) {
+// The repo's configured Intl types do not include the newer NumberFormat v3 rounding options yet.
+type NumberFormatOptionsWithRounding = Intl.NumberFormatOptions & {
+  roundingIncrement?: number | undefined;
+  roundingMode?: string | undefined;
+};
+
+function getFractionDigits(format?: NumberFormatOptionsWithRounding) {
   const defaultOptions = getFormatter('en-US').resolvedOptions();
   const minimumFractionDigits =
     format?.minimumFractionDigits ?? defaultOptions.minimumFractionDigits ?? 0;
@@ -14,17 +20,39 @@ function getFractionDigits(format?: Intl.NumberFormatOptions) {
   return { maximumFractionDigits, minimumFractionDigits };
 }
 
-function roundToFractionDigits(value: number, maximumFractionDigits: number) {
+export function roundToFractionDigits(
+  value: number,
+  maximumFractionDigits: number,
+  format?: NumberFormatOptionsWithRounding,
+) {
   if (!Number.isFinite(value)) {
     return value;
   }
   const digits = Math.min(Math.max(maximumFractionDigits, 0), 20);
-  return Number(value.toFixed(digits));
+  const isPercentWithExplicitPrecision =
+    format?.style === 'percent' &&
+    (format.maximumFractionDigits != null || format.minimumFractionDigits != null);
+  const scale = isPercentWithExplicitPrecision ? 100 : 1;
+  const valueToRound = value * scale;
+
+  if (format?.roundingIncrement == null && format?.roundingMode == null) {
+    return Number(valueToRound.toFixed(digits)) / scale;
+  }
+
+  const roundingFormatOptions: NumberFormatOptionsWithRounding = {
+    useGrouping: false,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+    roundingIncrement: format?.roundingIncrement,
+    roundingMode: format?.roundingMode,
+  };
+
+  return Number(getFormatter('en-US', roundingFormatOptions).format(valueToRound)) / scale;
 }
 
-export function removeFloatingPointErrors(value: number, format?: Intl.NumberFormatOptions) {
+export function removeFloatingPointErrors(value: number, format?: NumberFormatOptionsWithRounding) {
   const { maximumFractionDigits } = getFractionDigits(format);
-  return roundToFractionDigits(value, maximumFractionDigits);
+  return roundToFractionDigits(value, maximumFractionDigits, format);
 }
 
 function snapToStep(
@@ -73,7 +101,7 @@ export function toValidatedNumber(
     minWithDefault: number;
     maxWithDefault: number;
     minWithZeroDefault: number;
-    format: Intl.NumberFormatOptions | undefined;
+    format: NumberFormatOptionsWithRounding | undefined;
     snapOnStep: boolean;
     small: boolean;
     clamp: boolean;