[number field] Improve parsing logic (#2725)

Author: atomiks

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

@@ -108,6 +108,81 @@ describe('<NumberField.Input />', () => {
     expect(input).to.have.value('10');
   });
 
+  it('allows unicode plus/minus, permille and fullwidth digits on keydown', async () => {
+    await render(
+      <NumberField.Root>
+        <NumberField.Input />
+      </NumberField.Root>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await act(async () => input.focus());
+
+    function dispatchKey(key: string) {
+      const evt = new window.KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+      return input.dispatchEvent(evt);
+    }
+
+    expect(dispatchKey('−')).to.equal(true); // MINUS SIGN U+2212
+    expect(dispatchKey('＋')).to.equal(true); // FULLWIDTH PLUS SIGN U+FF0B
+    expect(dispatchKey('‰')).to.equal(true);
+    expect(dispatchKey('１')).to.equal(true);
+  });
+
+  it('applies locale-aware decimal/group gating (de-DE)', async () => {
+    await render(
+      <NumberField.Root locale="de-DE">
+        <NumberField.Input />
+      </NumberField.Root>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await act(async () => input.focus());
+
+    const dispatchKey = (key: string) => {
+      const evt = new window.KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+      return input.dispatchEvent(evt);
+    };
+
+    // de-DE: decimal is ',' and group is '.'
+    // First comma is allowed
+    expect(dispatchKey(',')).to.equal(true);
+    // Simulate a typical user value with a digit before decimal to let change handler accept it
+    fireEvent.change(input, { target: { value: '1,' } });
+    expect(input).to.have.value('1,');
+
+    // Second comma should be blocked
+    expect(dispatchKey(',')).to.equal(false);
+
+    // Grouping '.' should be allowed multiple times
+    expect(dispatchKey('.')).to.equal(true);
+    fireEvent.change(input, { target: { value: '1.,' } });
+    expect(dispatchKey('.')).to.equal(true);
+  });
+
+  it('allows space key when locale uses space-like grouping (pl-PL)', async () => {
+    await render(
+      <NumberField.Root locale="pl-PL">
+        <NumberField.Input />
+      </NumberField.Root>,
+    );
+
+    const input = screen.getByRole('textbox');
+    await act(async () => input.focus());
+
+    const dispatchKey = (key: string) => {
+      const evt = new window.KeyboardEvent('keydown', { key, bubbles: true, cancelable: true });
+      return input.dispatchEvent(evt);
+    };
+
+    // pl-PL grouping is a space-like character; typing plain space from keyboard should be allowed
+    expect(dispatchKey(' ')).to.equal(true);
+
+    // Simulate a typical user value using a regular space as group
+    fireEvent.change(input, { target: { value: '1 234' } });
+    expect(input).to.have.value('1 234');
+  });
+
   it('commits formatted value only on blur', async () => {
     await render(
       <NumberField.Root>
@@ -544,6 +619,29 @@ describe('<NumberField.Input />', () => {
     // Without explicit precision formatting, the behavior depends on the step
     // The current implementation preserves full precision until it differs from canonical
     expect(input).to.have.value((1.235).toLocaleString(undefined, { minimumFractionDigits: 3 }));
-    expect(onValueChange.callCount).to.equal(callCountBeforeBlur);
+    expect(onValueChange.callCount).to.equal(callCountBeforeBlur + 1);
+  });
+
+  it('commits parsed value on blur and normalizes display for fr-FR', async () => {
+    const onValueChange = spy();
+
+    await render(
+      <NumberField.Root locale="fr-FR" onValueChange={onValueChange}>
+        <NumberField.Input />
+      </NumberField.Root>,
+    );
+
+    const input = screen.getByRole<HTMLInputElement>('textbox');
+    await act(async () => input.focus());
+
+    fireEvent.change(input, { target: { value: '1234,5' } });
+    expect(input).to.have.value('1234,5');
+
+    fireEvent.blur(input);
+
+    expect(onValueChange.callCount).to.equal(1);
+    expect(onValueChange.firstCall.args[0]).to.equal(1234.5);
+
+    expect(input.value).to.equal((1234.5).toLocaleString('fr-FR'));
   });
 });

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

@@ -8,7 +8,17 @@ import { useFieldRootContext } from '../../field/root/FieldRootContext';
 import { useFieldControlValidation } from '../../field/control/useFieldControlValidation';
 import { fieldValidityMapping } from '../../field/utils/constants';
 import { DEFAULT_STEP } from '../utils/constants';
-import { ARABIC_RE, HAN_RE, getNumberLocaleDetails, parseNumber } from '../utils/parse';
+import {
+  ARABIC_DETECT_RE,
+  HAN_DETECT_RE,
+  FULLWIDTH_DETECT_RE,
+  getNumberLocaleDetails,
+  parseNumber,
+  ANY_MINUS_RE,
+  ANY_PLUS_RE,
+  ANY_MINUS_DETECT_RE,
+  ANY_PLUS_DETECT_RE,
+} from '../utils/parse';
 import type { NumberFieldRoot } from '../root/NumberFieldRoot';
 import { stateAttributesMapping as numberFieldStateAttributesMapping } from '../utils/stateAttributesMapping';
 import { useField } from '../../field/useField';
@@ -171,43 +181,38 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
 
       const formatOptions = formatOptionsRef.current;
       const parsedValue = parseNumber(inputValue, locale, formatOptions);
-      const canonicalText = formatNumber(parsedValue, locale, formatOptions);
-      const maxPrecisionText = formatNumberMaxPrecision(parsedValue, locale, formatOptions);
-      const canonical = parseNumber(canonicalText, locale, formatOptions);
-      const maxPrecision = parseNumber(maxPrecisionText, locale, formatOptions);
-
       if (parsedValue === null) {
         return;
       }
 
       blockRevalidationRef.current = true;
 
-      if (validationMode === 'onBlur') {
-        commitValidation(canonical);
-      }
-
+      // If an explicit precision is requested, round the committed numeric value.
       const hasExplicitPrecision =
         formatOptions?.maximumFractionDigits != null ||
         formatOptions?.minimumFractionDigits != null;
 
-      if (hasExplicitPrecision) {
-        // When the consumer explicitly requests a precision, always round the number to that
-        // precision and normalize the displayed text accordingly.
-        if (value !== canonical) {
-          setValue(canonical, event.nativeEvent);
-        }
-        if (inputValue !== canonicalText) {
-          setInputValue(canonicalText);
-        }
-      } else if (value !== maxPrecision) {
-        // Default behaviour: preserve max precision until it differs from canonical
-        setValue(canonical, event.nativeEvent);
-      } else {
-        const shouldPreserveFullPrecision =
-          parsedValue === value && inputValue === maxPrecisionText;
-        if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
-          setInputValue(canonicalText);
-        }
+      const maxFrac = formatOptions?.maximumFractionDigits;
+      const committed =
+        hasExplicitPrecision && typeof maxFrac === 'number'
+          ? Number(parsedValue.toFixed(maxFrac))
+          : parsedValue;
+
+      if (validationMode === 'onBlur') {
+        commitValidation(committed);
+      }
+      if (value !== committed) {
+        setValue(committed, event.nativeEvent);
+      }
+
+      // Normalize only the displayed text
+      const canonicalText = formatNumber(committed, locale, formatOptions);
+      const maxPrecisionText = formatNumberMaxPrecision(parsedValue, locale, formatOptions);
+      const shouldPreserveFullPrecision =
+        !hasExplicitPrecision && parsedValue === value && inputValue === maxPrecisionText;
+
+      if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
+        setInputValue(canonicalText);
       }
     },
     onChange(event) {
@@ -251,20 +256,42 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
       let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
 
       const { decimal, currency, percentSign } = getNumberLocaleDetails(
-        [],
+        locale,
         formatOptionsRef.current,
       );
 
       const selectionStart = event.currentTarget.selectionStart;
       const selectionEnd = event.currentTarget.selectionEnd;
       const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.length;
 
-      // Allow the minus key only if there isn't already a plus or minus sign, or if all the text
-      // is selected, or if only the minus sign is highlighted.
-      if (event.key === '-' && allowedNonNumericKeys.has('-')) {
-        const isMinusHighlighted =
-          selectionStart === 0 && selectionEnd === 1 && inputValue[0] === '-';
-        isAllowedNonNumericKey = !inputValue.includes('-') || isAllSelected || isMinusHighlighted;
+      // Normalize handling of plus/minus signs via precomputed regexes
+      const selectionIsExactlyCharAt = (index: number) =>
+        selectionStart === index && selectionEnd === index + 1;
+
+      if (
+        ANY_MINUS_DETECT_RE.test(event.key) &&
+        Array.from(allowedNonNumericKeys).some((k) => ANY_MINUS_DETECT_RE.test(k || ''))
+      ) {
+        // Only allow one sign unless replacing the existing one or all text is selected
+        const existingIndex = inputValue.search(ANY_MINUS_RE);
+        const isReplacingExisting =
+          existingIndex != null && existingIndex !== -1 && selectionIsExactlyCharAt(existingIndex);
+        isAllowedNonNumericKey =
+          !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) ||
+          isAllSelected ||
+          isReplacingExisting;
+      }
+      if (
+        ANY_PLUS_DETECT_RE.test(event.key) &&
+        Array.from(allowedNonNumericKeys).some((k) => ANY_PLUS_DETECT_RE.test(k || ''))
+      ) {
+        const existingIndex = inputValue.search(ANY_PLUS_RE);
+        const isReplacingExisting =
+          existingIndex != null && existingIndex !== -1 && selectionIsExactlyCharAt(existingIndex);
+        isAllowedNonNumericKey =
+          !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) ||
+          isAllSelected ||
+          isReplacingExisting;
       }
 
       // Only allow one of each symbol.
@@ -279,8 +306,9 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
       });
 
       const isLatinNumeral = /^[0-9]$/.test(event.key);
-      const isArabicNumeral = ARABIC_RE.test(event.key);
-      const isHanNumeral = HAN_RE.test(event.key);
+      const isArabicNumeral = ARABIC_DETECT_RE.test(event.key);
+      const isHanNumeral = HAN_DETECT_RE.test(event.key);
+      const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(event.key);
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
 
       if (
@@ -294,6 +322,7 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
         isAllowedNonNumericKey ||
         isLatinNumeral ||
         isArabicNumeral ||
+        isFullwidthNumeral ||
         isHanNumeral ||
         isNavigateKey
       ) {