Change Proposal: Restrict keystrokes in `NumberInput` to characters valid for the selected `numberMode`
Nobody has claimed this yet.
Assessment
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Newbie friendliness
- 48/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- typescript
- Domain
- frontend
Research direction
Start at NumberInputText and trace how its underlying TextField receives keystroke and paste input, alongside the existing whole-string validation of numberText. Check how numberMode selects the allowed characters and how rejected input can provide a visual or aria-live signal. Done means filtering follows the four stated modes, mid-entry signs remain typeable where required, and whole-string validation is unchanged.
Written by the indexing model from the issue text.
Description
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
naturalmode 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 like12-3or1.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.
- Dominant language
- TypeScript
- Stars
- 8
- Forks
- 3
- Avg merge
- 2d 6h
- Merged PRs (30d)
- 11
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from DiamondLightSource/sci-react-ui
-
needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
needs-triage
Difficulty 4/5 3-5 days Newbie friendliness 55/100
-
accepted
Difficulty 4/5 3-5 days Newbie friendliness 68/100
-
needs-triage
Difficulty 5/5 Over a week Newbie friendliness 45/100
-
needs-triage
Difficulty 5/5 Over a week Newbie friendliness 35/100
DiamondLightSource/sci-react-ui#278 · 1 comment ·
All issues in DiamondLightSource/sci-react-ui
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
copse-dev/agent-pane#2953 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
Eynzof/Hermes-CN-Desktop#610 ·
-
bug clawsweeper:linked-pr-open clawsweeper:needs-live-repro clawsweeper:no-new-fix-pr impact:message-loss issue-rating: 🐚 platinum hermit P2 regression
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
-
calcite-components needs triage refactor
Difficulty 2/5 1-3 hours Newbie friendliness 75/100
Esri/calcite-design-system#15203 ·