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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#31,639 1 comentario 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@sarankumar1325 ya está trabajando en esto.

Desde el 24/10/2026.

  • #31651 de @sarankumar1325 — abierto

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
90/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
angular, ios, typescript
Área
frontend, mobile

Línea de trabajo

Comienza en core/src/components/input-otp/input-otp.tsx y examina la rama de cuadro vacío de onKeyDown y la rama de inserción y desplazamiento de onInput. Reproduce el problema con la demo Basic Usage en un iPhone introduce tres dígitos y pulsa Backspace. La corrección estará completa cuando Backspace en un cuadro vacío borre el valor anterior y al escribir en un cuadro lleno se sustituya su valor sin desplazar los dígitos restantes.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
3 d 4 h
PR fusionados (30 d)
72

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de ionic-team/ionic-framework

Todos los issues de ionic-team/ionic-framework

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.