[number field] Ensure onValueChange is called with parsed value as formatted

Author: atomiks

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

@@ -15,6 +15,7 @@ import type { NumberFieldRoot } from '../root/NumberFieldRoot';
 import { styleHookMapping } from '../utils/styleHooks';
 import { useField } from '../../field/useField';
 import { useFormContext } from '../../form/FormContext';
+import { formatNumber } from '../../utils/formatNumber';
 
 const customStyleHookMapping = {
   ...fieldValidityMapping,
@@ -126,6 +127,18 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
               return;
             }
 
+            // Restore full-precision on focus
+            if (value !== null) {
+              const fullPrecision = formatNumber(value, locale, {
+                ...formatOptionsRef.current,
+                maximumFractionDigits: 20,
+              });
+              allowInputSyncRef.current = false;
+              setInputValue(fullPrecision);
+              const len = fullPrecision.length;
+              event.currentTarget.setSelectionRange(len, len);
+            }
+
             hasTouchedInputRef.current = true;
             setFocused(true);
 
@@ -153,12 +166,20 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
               return;
             }
 
-            const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
+            const beforeFormatValue = parseNumber(inputValue, locale, formatOptionsRef.current);
+
+            if (beforeFormatValue !== null) {
+              const text = formatNumber(beforeFormatValue, locale, formatOptionsRef.current);
+              const afterFormatValue = parseNumber(text, locale, formatOptionsRef.current);
+
+              if (afterFormatValue !== value) {
+                setValue(afterFormatValue, event.nativeEvent);
+              } else {
+                setInputValue(text);
+              }
 
-            if (parsedValue !== null) {
-              setValue(parsedValue, event.nativeEvent);
               if (validationMode === 'onBlur') {
-                commitValidation(parsedValue);
+                commitValidation(afterFormatValue);
               }
             }
           },
@@ -327,6 +348,7 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
       allowInputSyncRef,
       locale,
       handleInputRef,
+      value,
     ],
   );
 

packages/react/src/number-field/root/NumberFieldRoot.test.tsx

@@ -135,6 +135,39 @@ describe('<NumberField />', () => {
       expect(onValueChange.callCount).to.equal(1);
       expect(onValueChange.firstCall.args[0]).to.equal(null);
     });
+
+    it('only fires once when blurring twice without edits (restores full precision on focus)', async () => {
+      const onValueChange = spy();
+      function App() {
+        const [value, setValue] = React.useState<number | null>(1.23456);
+        return (
+          <NumberField
+            value={value}
+            onValueChange={(val) => {
+              onValueChange(val);
+              setValue(val);
+            }}
+          />
+        );
+      }
+
+      await render(<App />);
+      const input = screen.getByRole('textbox');
+
+      const formatted = new Intl.NumberFormat().format(1.23456);
+      expect(input).to.have.value(formatted);
+
+      // First focus → blur: should round-trip and fire once
+      await act(() => input.focus());
+      await act(() => input.blur());
+      expect(onValueChange.callCount).to.equal(1);
+      expect(onValueChange.firstCall.args[0]).to.equal(parseFloat(formatted));
+
+      // Second focus → blur without typing: no new onValueChange
+      await act(() => input.focus());
+      await act(() => input.blur());
+      expect(onValueChange.callCount).to.equal(1);
+    });
   });
 
   describe('prop: disabled', () => {

packages/react/src/number-field/root/useNumberFieldRoot.ts

@@ -297,6 +297,7 @@ export function useNumberFieldRoot(
 
         // Prevent the default behavior to avoid scrolling the page.
         event.preventDefault();
+        allowInputSyncRef.current = true;
 
         const amount = getStepAmount(event) ?? DEFAULT_STEP;