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

オープン 初心者向け
  • 何か問題がありますか？
#31,639 コメント 1 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@sarankumar1325 がすでに取り組んでいます。

2026年10月24日 から。

  • #31651 @sarankumar1325 による — オープン

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
90/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
angular, ios, typescript
領域
frontend, mobile

調査の方向性

core/src/components/input-otp/input-otp.tsx から始め、onKeyDown の空のボックス分岐と onInput の挿入およびシフト分岐を確認してください。iPhone 上の Basic Usage デモで 3 桁を入力してから Backspace を押すと再現できます。空のボックスで Backspace を押すと前の値がクリアされ、入力済みのボックスに入力すると、残りの桁をシフトさせずにその値が置き換えられれば修正完了です。

索引モデルが issue の本文から書いたものです。

説明

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.

主要言語
TypeScript
スター
52.7k
フォーク
13.3k
平均マージ
2日 21時間
マージ済み PR（30日）
65

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

ionic-team/ionic-framework のほかの issue

ionic-team/ionic-framework の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。