fix: improve keydown handling

Author: atomiks

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

@@ -108,6 +108,58 @@ 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('commits formatted value only on blur', async () => {
     await render(
       <NumberField.Root>

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

@@ -8,7 +8,15 @@ 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_RE,
+  HAN_RE,
+  FULLWIDTH_RE,
+  getNumberLocaleDetails,
+  parseNumber,
+  UNICODE_MINUS_SIGNS,
+  UNICODE_PLUS_SIGNS,
+} from '../utils/parse';
 import type { NumberFieldRoot } from '../root/NumberFieldRoot';
 import { stateAttributesMapping as numberFieldStateAttributesMapping } from '../utils/stateAttributesMapping';
 import { useField } from '../../field/useField';
@@ -251,20 +259,40 @@ 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 (ASCII and unicode variants)
+      const anyMinus = ['-'].concat(UNICODE_MINUS_SIGNS);
+      const anyPlus = ['+'].concat(UNICODE_PLUS_SIGNS);
+
+      const containsAny = (s: string, chars: string[]) => chars.some((ch) => s.includes(ch));
+      const selectionIsExactlyCharAt = (index: number) =>
+        selectionStart === index && selectionEnd === index + 1;
+
+      if (anyMinus.includes(event.key) && anyMinus.some((k) => allowedNonNumericKeys.has(k))) {
+        // Only allow one sign unless replacing the existing one or all text is selected
+        const existingIndex = anyMinus.map((ch) => inputValue.indexOf(ch)).find((i) => i !== -1);
+        const isReplacingExisting =
+          existingIndex != null && existingIndex !== -1 && selectionIsExactlyCharAt(existingIndex);
+        isAllowedNonNumericKey =
+          !containsAny(inputValue, anyMinus.concat(anyPlus)) ||
+          isAllSelected ||
+          isReplacingExisting;
+      }
+      if (anyPlus.includes(event.key) && anyPlus.some((k) => allowedNonNumericKeys.has(k))) {
+        const existingIndex = anyPlus.map((ch) => inputValue.indexOf(ch)).find((i) => i !== -1);
+        const isReplacingExisting =
+          existingIndex != null && existingIndex !== -1 && selectionIsExactlyCharAt(existingIndex);
+        isAllowedNonNumericKey =
+          !containsAny(inputValue, anyMinus.concat(anyPlus)) ||
+          isAllSelected ||
+          isReplacingExisting;
       }
 
       // Only allow one of each symbol.
@@ -281,6 +309,7 @@ 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 isFullwidthNumeral = FULLWIDTH_RE.test(event.key);
       const isNavigateKey = NAVIGATE_KEYS.has(event.key);
 
       if (
@@ -294,6 +323,7 @@ export const NumberFieldInput = React.forwardRef(function NumberFieldInput(
         isAllowedNonNumericKey ||
         isLatinNumeral ||
         isArabicNumeral ||
+        isFullwidthNumeral ||
         isHanNumeral ||
         isNavigateKey
       ) {

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

@@ -15,7 +15,15 @@ import type { BaseUIComponentProps } from '../../utils/types';
 import type { FieldRoot } from '../../field/root/FieldRoot';
 import { stateAttributesMapping } from '../utils/stateAttributesMapping';
 import { useRenderElement } from '../../utils/useRenderElement';
-import { getNumberLocaleDetails, PERCENTAGES } from '../utils/parse';
+import {
+  getNumberLocaleDetails,
+  PERCENTAGES,
+  UNICODE_MINUS_SIGNS,
+  UNICODE_PLUS_SIGNS,
+  PERMILLE,
+  FULLWIDTH_DECIMAL,
+  FULLWIDTH_GROUP,
+} from '../utils/parse';
 import { formatNumber, formatNumberMaxPrecision } from '../../utils/formatNumber';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { CHANGE_VALUE_TICK_DELAY, DEFAULT_STEP, START_AUTO_CHANGE_DELAY } from '../utils/constants';
@@ -139,17 +147,19 @@ export const NumberFieldRoot = React.forwardRef(function NumberFieldRoot(
   const getAllowedNonNumericKeys = useEventCallback(() => {
     const { decimal, group, currency } = getNumberLocaleDetails(locale, format);
 
-    const keys = new Set(['.', ',', decimal, group]);
+    const keys = new Set(['.', ',', decimal, group, FULLWIDTH_DECIMAL, FULLWIDTH_GROUP]);
 
     if (formatStyle === 'percent') {
       PERCENTAGES.forEach((key) => keys.add(key));
     }
+    // Permille is supported by the parser regardless of format style
+    PERMILLE.forEach((key) => keys.add(key));
     if (formatStyle === 'currency' && currency) {
       keys.add(currency);
     }
-    if (minWithDefault < 0) {
-      keys.add('-');
-    }
+    // Allow plus sign in all cases; minus sign only when negatives are valid
+    ['+'].concat(UNICODE_PLUS_SIGNS).forEach((key) => keys.add(key));
+    (minWithDefault < 0 ? ['-'].concat(UNICODE_MINUS_SIGNS) : []).forEach((key) => keys.add(key));
 
     return keys;
   });

packages/react/src/number-field/utils/parse.test.ts

@@ -114,7 +114,7 @@ describe('NumberField parse', () => {
     });
 
     it('collapses extra dots from mixed-locale inputs', () => {
-      // First '.' is decimal; subsequent '.' are removed
+      // Last '.' is decimal; previous '.' are removed
       expect(parseNumber('1.234.567.89')).to.equal(1234567.89);
     });