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

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#31,639 1 Kommentar 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

@sarankumar1325 arbeitet bereits daran.

Seit 24.10.2026.

  • #31651 von @sarankumar1325 — offen

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
90/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
angular, ios, typescript
Bereich
frontend, mobile

Rechercherichtung

Beginne in core/src/components/input-otp/input-otp.tsx und untersuche den Empty-Box-Zweig von onKeyDown sowie den Insert-and-Shift-Zweig von onInput. Reproduziere dies mit der Basic Usage-Demo auf einem iPhone, indem du drei Ziffern eingibst und Backspace drückst. Die Korrektur ist abgeschlossen, wenn Backspace in einem leeren Feld den vorherigen Wert löscht und die Eingabe in ein gefülltes Feld dessen Wert ersetzt, ohne die übrigen Ziffern zu verschieben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
2 T. 21 Std.
Gemergte PRs (30 T.)
65

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus ionic-team/ionic-framework

Alle Issues in ionic-team/ionic-framework

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.