[Android] inputotp does not jump to next field when using onscreen keyboard

[DwayneHawkins]

Describe the bug

On an android device, in the chrome browser (reproduced with v128.0.6613.88, android 14), surf to https://primeng.org/inputotp In the "Basic" demo, click/tap in the first box Enter "ABC" with your onscreen keyboard The input is all in the same field and it does not go to the next field.

Environment

android 14 chrome browser v127.0.6533.103

Reproducer

No response

Angular version

17.3.5

PrimeNG version

17.17.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

latest

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

The cursor should jump to the next input field in the opt-input-component.

[ibrahimkelly]

Resolved in the latest release. Make npm i primeng@latest or update prime ng version in package.json so npm i.

From chrome

From Edge

[DwayneHawkins]

Thanks, will try!

[SoyDiego]

If it's solved, closed the issue @EdwinHauspie. Thanks! :)

[DwayneHawkins]

I don't think it's fixed, the demo page ( https://primeng.org/inputotp ) on the test device was set to 17.18.9, but the case is very specific. It's a samsung device, with the default samsung keyboard, with text prediction enabled (which is the default). If I go to the keyboard settings and disable the text prediction, the inputopt works OK.

[DwayneHawkins]

Fyi I have tested this scenario on a real device as well, confirming the issue. Not sure if this is even solvable :-)

[JonathanRangelB]

Hi, here to confirm what @EdwinHauspie reports, the problem happens on actual android devices using any chromium based browser (tested on edge, chrome, brave, opera mini, firefox, samsung "Internet").

I tested this behavior on different android devices with same strange result, Firefox mobile works as expected though, do not have any IOS device to test and confirm if it has the same problem. Have to mention this is not keyboard related issue (tested on Gboard, samsung keyboard and switkey)

On what I suspect to be the problem is with the usage of event.code, based on MDN event.code is for physical keyboard and event.key for the character the key maps to.

This can be tested using this toptal keycode tool. For example on my linux-brave browser instance the backspace key shows this:

And on the galaxy S22+ android device looks like this:

https://github.com/user-attachments/assets/f19e70fb-96f6-4905-b5d8-ed31eb75ec12

As you might see is that event.code is empty on mobile (see event dump section also), that seems to be the issue in my opinion.

Looking at the sourcecode this might be fixed changing the event.code occurrences with event.key on this line

Hope that helps :smile:

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles: