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

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#31,639 1 commentaire 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

@sarankumar1325 y travaille déjà.

Depuis le 24/10/2026.

  • #31651 par @sarankumar1325 — ouverte

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
90/100
Type d'issue
Bug
Clarté
Clairement spécifiée
Activité
Active
Stack technique
angular, ios, typescript
Domaine
frontend, mobile

Piste de recherche

Commence dans core/src/components/input-otp/input-otp.tsx et examine la branche de case vide de onKeyDown ainsi que la branche d’insertion et de décalage de onInput. Reproduis le problème avec la démo Basic Usage sur un iPhone en saisissant trois chiffres et en appuyant sur Backspace. La correction est terminée lorsque Backspace dans une case vide efface la valeur précédente et que la saisie dans une case pleine remplace sa valeur sans décaler les chiffres restants.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
52.7k
Forks
13.3k
Merge moyen
3 j 4 h
PR mergées (30 j)
72

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de ionic-team/ionic-framework

Toutes les issues de ionic-team/ionic-framework

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.