Skip to content

fix(components/atom/pinInput): fix character input on mobile virtual keyboards#2968

Open
ferransimon wants to merge 1 commit intomasterfrom
fix/pin-input-mobile
Open

fix(components/atom/pinInput): fix character input on mobile virtual keyboards#2968
ferransimon wants to merge 1 commit intomasterfrom
fix/pin-input-mobile

Conversation

@ferransimon
Copy link
Copy Markdown
Collaborator

Problem

Some mobile users were unable to type any character into the PinInput component when using a virtual (on-screen) keyboard.

The root cause was that the component relied exclusively on keydown events to capture input. Most Android virtual keyboards fire keydown with event.key = "Unidentified" (or "Process") instead of the actual character. In the reducer, "Unidentified".length > 1 caused the event to enter the special-key switch block, where it fell through a default: break — silently dropping the input. Because the <input> elements are controlled components and their React onChange was a no-op, the native browser update was also discarded on every re-render.

Solution

Added an input event listener alongside the existing keydown listener in useKeyPress:

  • keydown: now skips keys reported as "Unidentified" or "Process" and lets the input event handle them. For normal printable characters on desktop, preventDefault() is called to suppress the subsequent input event and avoid double-processing.
  • input: fires when keydown didn't process the character (mobile path). Passes a synthetic { key: event.data } object to the existing callback, which flows through the reducer's existing single-character validation logic without any reducer changes.

Also fixed a pre-existing bug in useKeyPress where the events array was accumulating undefined values (the return value of addEventListener) and was never used for proper cleanup.

Files changed

  • components/atom/pinInput/src/hooks/useKeyPress.js — dual keydown/input listener with guards
  • components/atom/pinInput/test/index.test.js — two new reducer tests covering the "Unidentified" key path and the synthetic mobile input event path

@github-actions
Copy link
Copy Markdown

STATEMENTS BRANCHES FUNCTIONS LINES
≍ 0.14↓ ≍ 0.1↓ ≍ 0.23↓ ≍ 0.23↓
% 76.44 63.34 68.08 78.04
ABS 3509 / 4590 2127 / 3358 689 / 1012 3327 / 4263

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant