Skip to content

InputOtp | KeyboardEvent.code --> KeyboardEvent.key (& fix bugs on Android browsers not supporting .code) #8096

@Perfect03

Description

@Perfect03

Describe the bug

A bug was noticed in the InputOtp component on Android Chrome — this modern mobile browser does not provide event.code. As a result, it’s impossible to delete characters entered into Input (the event.code === 'Backspace' check fails). Most likely, similar bugs exist across other components.

Pull Request Link

#8095

Reason for not contributing a PR

  • Lack of time
  • Unsure how to implement the fix/feature
  • Difficulty understanding the codebase
  • Other

Other Reason

Migrating all checks from event.code to event.key across the codebase fixes issues in modern browsers and makes the code more consistent.

If this PR gets rejected, I’ll of course submit a small bugfix for InputOtp (just a few lines). However, it would be better to apply the event.code → event.key migration across the entire codebase for consistency.

Reproducer

https://stackblitz.com/edit/vitejs-vite-hjdcxvg6?file=src%2FApp.vue

Environment

Android Chrome; Google Keyboard

Vue version

3.5.21 (latest)

PrimeVue version

4.3.9 (latest)

Node version

No response

Browser(s)

Chrome (Android) latest

Steps to reproduce the behavior

  1. Enter characters into InputOtp.
  2. Try to delete the characters.

Expected behavior

The characters are deleted correctly.

Metadata

Metadata

Labels

Type: BugIssue contains a bug related to a specific component. Something about the component is not working

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions