ionic-framework icon indicating copy to clipboard operation
ionic-framework copied to clipboard

bug(ion-input-otp): cursor does not jump to the first field

Open robingenz opened this issue 6 months ago • 0 comments

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

On Android, if you enter a character in the last OTP field and it already has a value, the cursor does not jump to the first field. It looks like this only occurs if the type is set to text.

https://github.com/user-attachments/assets/4fec5d3d-74b9-4bfe-a063-9bee09c64926

Expected Behavior

The first otp field should be focused.

Steps to Reproduce

  1. Create a OTP input of type text:
<ion-input-otp type="text"></ion-input-otp>
  1. Enter 4 values
  2. The focus is now on the third field

Code Reproduction URL

https://stackblitz.com/edit/fz2mawht

Ionic Info

Ionic:

   Ionic CLI                     : 7.2.1
   Ionic Framework               : @ionic/angular 8.6.0
   @angular-devkit/build-angular : 19.2.9
   @angular-devkit/schematics    : 19.2.9
   @angular/cli                  : 19.2.9
   @ionic/angular-toolkit        : 11.0.1

Capacitor:

   Capacitor CLI      : 7.2.0
   @capacitor/android : 7.2.0
   @capacitor/core    : 7.2.0
   @capacitor/ios     : 7.2.0

Cordova:

   Cordova CLI       : 12.0.0 ([email protected])
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed globally
   native-run  : 2.0.1

System:

   NodeJS : v20.18.1 (/opt/homebrew/Cellar/node@20/20.18.1/bin/node)
   npm    : 10.8.2
   OS     : macOS Unknown
   Xcode  : Xcode 16.2 Build version 16C5032a

Additional Information

No response

robingenz avatar Jun 06 '25 08:06 robingenz