react / react/react-native

TextInput briefly displays restricted characters before validation removes them when using onChangeText

Aperta
#47,252 13 commenti 6 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Component: TextInput Issue: Author Provided Repro Needs: Attention
Lingua principale
C++
Stelle
127k
Fork
25.3k
Merge medio
1g 23h
PR unite (30g)
4

Descrizione

Description

Hi there,
Just wanted to bring up an issue that many of us have come across. When using TextInput with validation in onChangeText, restricted text still flashes for a moment before it gets removed. This is a pretty common need in apps, where real-time validation is used to guide user input (like blocking specific characters or setting a format). But right now, seeing those restricted characters pop up briefly makes the input feel a bit off.
There are many Workarounds and hacks for this but don’t quite fix the experience entirely. Is there any chance this could be smoothed out natively in the future?

Steps to reproduce

Screenshot 2024-10-28 at 18 10 02

React Native Version

0.76.0

Affected Platforms

Runtime - Android, Runtime - iOS

Output of npx react-native info
Not needed
Stacktrace or Logs
Not needed
Reproducer

https://snack.expo.dev/fVO2DXQPPqQVlm9QBZ2ms

Screenshots and Videos

No response

Guida per i contributori

Apri la guida per i contributori

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Direzione di ricerca

Inizia dal riproduttore Snack collegato e verifica il lampeggio sia su Android che su iOS usando React Native 0.76.0. Individua quindi la gestione di TextInput per onChangeText e traccia il modo in cui gli aggiornamenti della convalida vengono riflessi nel campo di testo nativo. Il lavoro è completato quando i caratteri non consentiti non compaiono più brevemente prima di essere rimossi dalla convalida sulle piattaforme interessate.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
react-native
Ambito
mobile
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Tranquilla
Chiarezza
Abbastanza chiara
Idoneità per principianti
42/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.