Handle external changes

Author: atomiks

packages/react/src/number-field/decrement/NumberFieldDecrement.test.tsx

@@ -51,6 +51,31 @@ describe('<NumberField.Decrement />', () => {
     expect(screen.getByRole('textbox')).to.have.value('-1');
   });
 
+  it('first increment after external controlled update', async () => {
+    function Controlled(props: { value: number | null }) {
+      return (
+        <NumberField.Root value={props.value}>
+          <NumberField.Decrement />
+          <NumberField.Input />
+        </NumberField.Root>
+      );
+    }
+
+    const { setProps } = await render(<Controlled value={null} />);
+    const input = screen.getByRole('textbox');
+    const button = screen.getByRole('button');
+
+    await act(async () => {
+      setProps({ value: 1.23456 });
+    });
+
+    expect(input).to.have.value('1.23456');
+
+    fireEvent.click(button);
+    // does not preserving full precision
+    expect(input).to.have.value('0.235');
+  });
+
   describe('press and hold', () => {
     clock.withFakeTimers();
 

packages/react/src/number-field/increment/NumberFieldIncrement.test.tsx

@@ -51,6 +51,31 @@ describe('<NumberField.Increment />', () => {
     expect(screen.getByRole('textbox')).to.have.value('1');
   });
 
+  it('first increment after external controlled update', async () => {
+    function Controlled(props: { value: number | null }) {
+      return (
+        <NumberField.Root value={props.value}>
+          <NumberField.Increment />
+          <NumberField.Input />
+        </NumberField.Root>
+      );
+    }
+
+    const { setProps } = await render(<Controlled value={null} />);
+    const input = screen.getByRole('textbox');
+    const button = screen.getByRole('button');
+
+    await act(async () => {
+      setProps({ value: 1.23456 });
+    });
+
+    expect(input).to.have.value('1.23456');
+
+    fireEvent.click(button);
+    // does not preserving full precision
+    expect(input).to.have.value('2.235');
+  });
+
   describe('press and hold', () => {
     clock.withFakeTimers();
 

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { act, screen, fireEvent } from '@mui/internal-test-utils';
+import { spy } from 'sinon';
 import { NumberField } from '@base-ui-components/react/number-field';
 import { createRenderer, describeConformance } from '#test-utils';
 
@@ -176,4 +177,33 @@ describe('<NumberField.Input />', () => {
     fireEvent.blur(input);
     expect(input).to.have.value('3');
   });
+
+  it('should preserve full precision on first blur after external value change', async () => {
+    const onValueChange = spy();
+
+    function Controlled(props: { value: number | null }) {
+      return (
+        <NumberField.Root value={props.value} onValueChange={onValueChange}>
+          <NumberField.Input />
+        </NumberField.Root>
+      );
+    }
+
+    const { setProps } = await render(<Controlled value={null} />);
+    const input = screen.getByRole('textbox');
+
+    await act(async () => {
+      setProps({ value: 1.23456 });
+    });
+
+    expect(input).to.have.value('1.23456');
+
+    await act(async () => {
+      input.focus();
+      input.blur();
+    });
+
+    expect(input).to.have.value('1.23456');
+    expect(onValueChange.callCount).to.equal(0);
+  });
 });

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

@@ -55,6 +55,8 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
     locale,
     inputRef,
     value,
+    externalUpdateRef,
+    isControlled,
   } = useNumberFieldRootContext();
 
   const { clearErrors } = useFormContext();
@@ -167,21 +169,31 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
               return;
             }
 
-            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);
-              }
+            const parsed = parseNumber(inputValue, locale, formatOptionsRef.current);
+            if (parsed === null) {
+              return;
+            }
 
+            if (isControlled && externalUpdateRef.current) {
+              externalUpdateRef.current = false;
+              // we trust the prop—no re‐format
               if (validationMode === 'onBlur') {
-                commitValidation(afterFormatValue);
+                commitValidation(parsed);
               }
+              return;
+            }
+
+            const canonicalText = formatNumber(parsed, locale, formatOptionsRef.current);
+            const canonical = parseNumber(canonicalText, locale, formatOptionsRef.current);
+
+            if (canonical !== value) {
+              setValue(canonical, event.nativeEvent);
+            } else {
+              setInputValue(canonicalText);
+            }
+
+            if (validationMode === 'onBlur') {
+              commitValidation(canonical);
             }
           },
           onChange(event) {
@@ -323,33 +335,35 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
         getInputValidationProps(getValidationProps(externalProps)),
       ),
     [
-      getInputValidationProps,
-      getValidationProps,
       id,
       required,
       name,
       disabled,
       readOnly,
       inputMode,
       inputValue,
+      handleInputRef,
       invalid,
       labelId,
+      getInputValidationProps,
+      getValidationProps,
       setFocused,
+      value,
+      locale,
+      formatOptionsRef,
+      allowInputSyncRef,
+      setInputValue,
       setTouched,
+      isControlled,
+      externalUpdateRef,
       validationMode,
-      formatOptionsRef,
-      commitValidation,
       setValue,
+      commitValidation,
       getAllowedNonNumericKeys,
       getStepAmount,
       min,
       max,
       incrementValue,
-      setInputValue,
-      allowInputSyncRef,
-      locale,
-      handleInputRef,
-      value,
     ],
   );
 

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

@@ -99,6 +99,17 @@ export function useNumberFieldRoot(
   const allowInputSyncRef = React.useRef(true);
   const unsubscribeFromGlobalContextMenuRef = React.useRef<() => void>(() => {});
 
+  const isControlled = externalValue !== undefined;
+  const lastExternalValueRef = React.useRef<number | null | undefined>(externalValue);
+  const externalUpdateRef = React.useRef(false);
+
+  useModernLayoutEffect(() => {
+    if (isControlled && externalValue !== lastExternalValueRef.current) {
+      externalUpdateRef.current = true;
+    }
+    lastExternalValueRef.current = externalValue;
+  }, [externalValue, isControlled]);
+
   useModernLayoutEffect(() => {
     if (validityData.initialValue === null && value !== validityData.initialValue) {
       setValidityData((prev) => ({ ...prev, initialValue: value }));
@@ -157,6 +168,22 @@ export function useNumberFieldRoot(
       setValueUnwrapped(validatedValue);
       setDirty(validatedValue !== validityData.initialValue);
 
+      if (dir != null) {
+        const wasExternal = externalUpdateRef.current;
+        externalUpdateRef.current = false;
+
+        const text = wasExternal
+          ? formatNumber(validatedValue, locale, {
+              ...formatOptionsRef.current,
+              maximumFractionDigits: 20,
+            })
+          : formatNumber(validatedValue, locale, formatOptionsRef.current);
+
+        allowInputSyncRef.current = false;
+        setInputValue(text);
+        return;
+      }
+
       // We need to force a re-render, because while the value may be unchanged, the formatting may
       // be different. This forces the `useModernLayoutEffect` to run which acts as a single source of
       // truth to sync the input value.
@@ -246,10 +273,20 @@ export function useNumberFieldRoot(
       return;
     }
 
-    const nextInputValue = formatNumber(value, locale, formatOptionsRef.current);
-
-    if (nextInputValue !== inputValue) {
-      setInputValue(nextInputValue);
+    if (isControlled && externalUpdateRef.current) {
+      // Respect precision if externally changed
+      const fullPrecision = formatNumber(value, locale, {
+        ...formatOptionsRef.current,
+        maximumFractionDigits: 20,
+      });
+      if (fullPrecision !== inputValue) {
+        setInputValue(fullPrecision);
+      }
+    } else {
+      const next = formatNumber(value, locale, formatOptionsRef.current);
+      if (next !== inputValue) {
+        setInputValue(next);
+      }
     }
   });
 
@@ -345,6 +382,8 @@ export function useNumberFieldRoot(
       locale,
       isScrubbing,
       setIsScrubbing,
+      externalUpdateRef,
+      isControlled,
     }),
     [
       inputRef,
@@ -376,6 +415,7 @@ export function useNumberFieldRoot(
       setInputValue,
       locale,
       isScrubbing,
+      isControlled,
     ],
   );
 }
@@ -512,5 +552,7 @@ export namespace useNumberFieldRoot {
     locale: Intl.LocalesArgument;
     isScrubbing: boolean;
     setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
+    externalUpdateRef: React.RefObject<boolean | null>;
+    isControlled: boolean;
   }
 }