[number field] Respect rounding mode on blur

Author: atomiks

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

@@ -585,6 +585,51 @@ describe('<NumberField.Input />', () => {
     expect(onValueChange.mock.calls[0][0]).toBe(1.23);
   });
 
+  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 onValueChange = vi.fn();
+      const format = {
+        maximumFractionDigits: 2,
+        roundingMode: 'floor',
+      };
+
+      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();
+      });
+
+      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 +656,45 @@ describe('<NumberField.Input />', () => {
     expect(input).toHaveValue(expectedValue);
   });
 
+  it('should round percent values to explicit display fraction digits on blur', async () => {
+    const onValueChange = vi.fn();
+    const format = {
+      style: 'percent',
+      maximumFractionDigits: 2,
+      roundingMode: 'floor',
+    } as const;
+
+    function Controlled() {
+      const [value, setValue] = React.useState<number | null>(null);
+      return (
+        <NumberField.Root
+          value={value}
+          onValueChange={(nextValue) => {
+            onValueChange(nextValue);
+            setValue(nextValue);
+          }}
+          format={format}
+          locale="en-US"
+        >
+          <NumberField.Input />
+        </NumberField.Root>
+      );
+    }
+
+    const { user } = await render(<Controlled />);
+    const input = screen.getByRole('textbox');
+
+    await act(async () => {
+      input.focus();
+    });
+
+    await user.keyboard('1.239%');
+    fireEvent.blur(input);
+
+    expect(onValueChange.mock.lastCall?.[0]).toBe(0.0123);
+    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,41 @@ 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('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,40 @@ 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 scale =
+    format?.style === 'percent' &&
+    (format.maximumFractionDigits != null || format.minimumFractionDigits != null)
+      ? 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 +102,7 @@ export function toValidatedNumber(
     minWithDefault: number;
     maxWithDefault: number;
     minWithZeroDefault: number;
-    format: Intl.NumberFormatOptions | undefined;
+    format: NumberFormatOptionsWithRounding | undefined;
     snapOnStep: boolean;
     small: boolean;
     clamp: boolean;