DiamondLightSource / DiamondLightSource/sci-react-ui
Change Proposal: Restrict keystrokes in `NumberInput` to characters valid for the selected `numberMode`
- Lenguaje dominante
- TypeScript
- Estrellas
- 8
- Forks
- 3
- Merge medio
- 3 d 15 h
- PR fusionados (30 d)
- 5
Descripción
## 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.
Guía de contribución
Línea de trabajo
Comienza en NumberInputText y sigue cómo su TextField subyacente recibe entradas de teclado y pegado, junto con la validación existente de la cadena completa de numberText. Comprueba cómo numberMode selecciona los caracteres permitidos y cómo las entradas rechazadas pueden proporcionar una señal visual o de aria-live. Se considera terminado cuando el filtrado sigue los cuatro modos indicados, los signos en mitad de la entrada siguen pudiéndose escribir cuando sea necesario y la validación de la cadena completa no cambia.
Escrito por el modelo de indexación a partir del texto del issue.
Evaluación
- Stack tecnológico
- typescript
- Área
- frontend
- Tipo de issue
- Nueva funcionalidad
- Dificultad
- 4/5
- Tiempo estimado
- 3-5 días
- Estado de actividad
- Tranquilo
- Claridad
- Bastante claro
- Aptitud para principiantes
- 48/100