Skip to content

Change Proposal: Restrict keystrokes in NumberInput to characters valid for the selected numberMode #276

Description

@zoharma

What is being proposed?

As discussed in Atlas #143, the NumberInput currently accepts any keystroke into the underlying TextField and only flags invalid content after the fact. A user can type letters, symbols, multiple decimal points, etc., and only discovers the problem from the "Invalid input" helper text.

Proposal: filter keystrokes/paste input as they happen, so only characters that could ever be valid for the active numberMode are accepted:

  • Natural: 0-9
  • Integer: 0-9, +, -
  • Floating: 0-9, +, -, .
  • Scientifc: 0-9, +, -, ., e/E

Why is this needed?

  • A natural mode field currently lets a user type -5, rejecting it only after the fact. Blocking - at keystroke time prevents that error state from being reachable at all.
  • For integer/floating/scientific, - must stay typeable (including mid-entry, e.g. - alone or -1.).
  • Filtering at input time avoids the most common invalid keystrokes (letters, symbols) ever reaching numberText. It doesn't catch positionally-invalid strings like 12-3 or 1.2.3, and those still rely on the existing whole-string validation on blur/submit.

Known limitations

Dropping a keystroke silently (character never appears) gives no feedback to screen reader users, unlike the current visible error state. The implementation should pair the filter with some non-visual signal so this isn't a regression for assistive technology users.

What will change?

NumberInputText filters out characters that are not in the allowed set for the active numberMode before they're accepted. When a keystroke is rejected, the field gives a lightweight signal that something happened (e.g. a brief visual cue, and an aria-live="polite" announcement so screen reader users aren't met with silence). Whole-string validation is unchanged. No new props required.

Interface changes (if any)

None required by default. Optional escape hatch if any keys are desired.

Breaking change?

  • Yes
  • No

Next steps

A maintainer will review this issue.
If accepted, it will be marked as accepted and a PR may then be opened.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs-triageThis issue needs to be categorised. E.g. accepted, duplicate, wont-do

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions