DiamondLightSource / DiamondLightSource/sci-react-ui
Change Proposal: Restrict keystrokes in `NumberInput` to characters valid for the selected `numberMode`
- Vorherrschende Sprache
- TypeScript
- Sterne
- 8
- Forks
- 3
- Ø Merge
- 3 T. 15 Std.
- Gemergte PRs (30 T.)
- 5
Beschreibung
## What is being proposed?
As discussed in [Atlas #143](https://github.com/DiamondLightSource/atlas/pull/143#issuecomment-5207977415), 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
- [X] No
## Next steps
A maintainer will review this issue.
If accepted, it will be marked as `accepted` and a PR may then be opened.
Beitragsleitfaden
Rechercherichtung
Beginne bei NumberInputText und verfolge, wie sein zugrunde liegendes TextField Tastatur- und Einfügeeingaben erhält, zusammen mit der bestehenden Validierung der gesamten Zeichenkette von numberText. Prüfe, wie numberMode die zulässigen Zeichen auswählt und wie abgelehnte Eingaben ein visuelles oder aria-live-Signal liefern können. Als erfüllt gilt dies, wenn die Filterung den vier genannten Modi folgt, Vorzeichen in der Mitte der Eingabe, wo erforderlich, weiterhin eingegeben werden können und die Validierung der gesamten Zeichenkette unverändert bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- typescript
- Bereich
- frontend
- Issue-Typ
- Feature
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Ruhig
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 48/100