[number field] Respect rounding mode on blur

Author: atomiks

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

@@ -585,6 +585,52 @@ describe('<NumberField.Input />', () => {
     expect(onValueChange.mock.calls[0][0]).toBe(1.23);
   });
 
+  (
+    [
+      ['en-US', '1.239'],
+      ['fr-FR', '1,239'],
+      ['ar-EG', '١٫٢٣٩'],
+    ] as const
+  ).forEach(([locale, inputText]) => {
+    it(`should respect roundingMode when rounding to explicit maximumFractionDigits on blur in ${locale}`, async () => {
+      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,

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,25 @@ 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('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,39 @@ 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?:
+    | 1
+    | 2
+    | 5
+    | 10
+    | 20
+    | 25
+    | 50
+    | 100
+    | 200
+    | 250
+    | 500
+    | 1000
+    | 2000
+    | 2500
+    | 5000
+    | undefined;
+  roundingMode?:
+    | 'ceil'
+    | 'floor'
+    | 'expand'
+    | 'trunc'
+    | 'halfCeil'
+    | 'halfFloor'
+    | 'halfExpand'
+    | 'halfTrunc'
+    | 'halfEven'
+    | undefined;
+};
+
+function getFractionDigits(format?: NumberFormatOptionsWithRounding) {
   const defaultOptions = getFormatter('en-US').resolvedOptions();
   const minimumFractionDigits =
     format?.minimumFractionDigits ?? defaultOptions.minimumFractionDigits ?? 0;
@@ -14,17 +46,34 @@ 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));
+
+  if (format?.roundingIncrement == null && format?.roundingMode == null) {
+    return Number(value.toFixed(digits));
+  }
+
+  const roundingFormatOptions: NumberFormatOptionsWithRounding = {
+    useGrouping: false,
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits,
+    roundingIncrement: format?.roundingIncrement,
+    roundingMode: format?.roundingMode,
+  };
+
+  return Number(getFormatter('en-US', roundingFormatOptions).format(value));
 }
 
-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 +122,7 @@ export function toValidatedNumber(
     minWithDefault: number;
     maxWithDefault: number;
     minWithZeroDefault: number;
-    format: Intl.NumberFormatOptions | undefined;
+    format: NumberFormatOptionsWithRounding | undefined;
     snapOnStep: boolean;
     small: boolean;
     clamp: boolean;