bug: input-otp, backspace in an empty box only moves focus instead of clearing the previous box

Aperta Adatta ai principianti
  • Qualcosa non va?
#31,639 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@sarankumar1325 ci sta già lavorando.

Dal 24/10/2026.

  • #31651 di @sarankumar1325 — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
90/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
angular, ios, typescript
Ambito
frontend, mobile

Direzione di ricerca

Inizia da core/src/components/input-otp/input-otp.tsx ed esamina il ramo della casella vuota di onKeyDown e il ramo di inserimento e spostamento di onInput. Riproduci il problema con la demo Basic Usage su un iPhone inserendo tre cifre e premendo Backspace. La correzione è completata quando Backspace in una casella vuota cancella il valore precedente e la digitazione in una casella piena ne sostituisce il valore senza spostare le cifre rimanenti.

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

Descrizione

package: core type: bug
Prerequisites
Ionic Framework Version

v9.x (9.0.8, same code on main)

Current Behavior

Happens on iOS (Safari and Capacitor app, on-screen keyboard), not every time. Not reproducible in desktop browsers.

Backspace in an empty box only moves focus to the previous box without clearing it. Since focus moves to the next empty box after each typed character, the first Backspace after typing can end up deleting nothing.

Typing into the now-focused, filled box then inserts the character and shifts the rest right instead of replacing it.

Expected Behavior

Per the docs:

  • Backspace: "In an empty box: moves focus back one box and clears its value."
  • Typing: "If the current box has a value, override the value with the entered character."
Steps to Reproduce
  1. On an iPhone, in the Basic Usage demo, type 789 (focus is now on box 4)
  2. Press Backspace: focus moves to box 3, 9 stays
  3. Type 6: the result is 7869 instead of 786

May take a few tries; it does not happen on every attempt.

Code Reproduction URL

https://ionicframework.com/docs/api/input-otp#basic-usage

Ionic Info

@ionic/core 9.0.8, @ionic/angular 9.0.8, @angular/core 22.2.3, @capacitor/core 8.5.3

Additional Information

The empty-box branch of onKeyDown in core/src/components/input-otp/input-otp.tsx only calls this.focusPrevious(index). It should also clear inputValues[index - 1] and its input ref, call updateValue(event), and preventDefault(). The insert-and-shift branch of onInput contradicts the documented override behavior.

Lingua principale
TypeScript
Stelle
52.7k
Fork
13.3k
Merge medio
2g 21h
PR unite (30g)
65

Preparare l'ambiente

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.

Altre issue di ionic-team/ionic-framework

Tutte le issue di ionic-team/ionic-framework

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.