fix(components/atom/pinInput): fix character input on mobile virtual keyboards#2968
Open
ferransimon wants to merge 1 commit intomasterfrom
Open
fix(components/atom/pinInput): fix character input on mobile virtual keyboards#2968ferransimon wants to merge 1 commit intomasterfrom
ferransimon wants to merge 1 commit intomasterfrom
Conversation
…ces to interact with pinInput
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
keydownevents to capture input. Most Android virtual keyboards firekeydownwithevent.key = "Unidentified"(or"Process") instead of the actual character. In the reducer,"Unidentified".length > 1caused the event to enter the special-keyswitchblock, where it fell through adefault: break— silently dropping the input. Because the<input>elements are controlled components and their ReactonChangewas a no-op, the native browser update was also discarded on every re-render.Solution
Added an
inputevent listener alongside the existingkeydownlistener inuseKeyPress:keydown: now skips keys reported as"Unidentified"or"Process"and lets theinputevent handle them. For normal printable characters on desktop,preventDefault()is called to suppress the subsequentinputevent and avoid double-processing.input: fires whenkeydowndidn'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
useKeyPresswhere theeventsarray was accumulatingundefinedvalues (the return value ofaddEventListener) and was never used for proper cleanup.Files changed
components/atom/pinInput/src/hooks/useKeyPress.js— dualkeydown/inputlistener with guardscomponents/atom/pinInput/test/index.test.js— two new reducer tests covering the"Unidentified"key path and the synthetic mobile input event path