Skip to content

Fix iOS autofill of the sign-in code - #823

Merged
rzueger merged 1 commit into
developfrom
fix-otp-ios-autofill
Jul 8, 2026
Merged

Fix iOS autofill of the sign-in code#823
rzueger merged 1 commit into
developfrom
fix-otp-ios-autofill

Conversation

@rzueger

@rzueger rzueger commented Jul 8, 2026

Copy link
Copy Markdown
Member

Problem

On iOS, when the 6-digit email sign-in code is offered above the keyboard
("From email: 123456"), tapping it filled only the first digit.
Reported by an LSZO customer; reproduced on lszo-test.web.app with
Brave + Apple Mail.

Cause

The code field is six separate <input maxLength={1}> boxes, and only
the first was marked autoComplete="one-time-code" (the rest were
off). iOS Security-Code AutoFill inserts the whole code into one
field
; maxLength={1} truncated it to one digit and handleChange
kept only the last character, discarding the other five.

Fix (src/components/LoginPage/OtpCodeForm.tsx)

  • Remove the per-box maxLength={1} (single-char display is already
    enforced by the controlled value), so the full autofilled code
    reaches onChange.
  • Mark every box autoComplete="one-time-code".
  • Spread a multi-character value across the boxes — the same
    distribution logic the paste handler used, factored into a shared
    fillFrom(startIndex, digits) helper — and auto-submit when complete.

Keeps the segmented UI, the data-cy handles, and all existing keyboard
/ paste behaviour unchanged.

Notes / scope

  • Applies to all iOS browsers (Brave, Chrome, etc. are all WebKit).
  • Codes arriving in the Gmail app are unaffected by this or any code
    change — iOS only auto-suggests codes from the Apple Mail app.
    Those users continue to copy-paste, which already works.

Verification

  • npm run typecheck clean; full Jest suite green (2284 tests).
  • OtpCodeForm.spec.tsx extended with an autofill group: a single
    change carrying the whole code into the first field fills all six boxes
    and auto-submits.
  • npm run build --project=lszm compiles.
  • On-device final check pending after deploy to lszo-test (cannot be
    tested in-repo; the jest autofill test is the local proxy).

iOS Security-Code AutoFill drops the whole 6-digit code into the first
input in one event. maxLength=1 truncated it to a single digit and only
the first box was marked one-time-code, so autofill filled just one box.

Remove the per-box maxLength, mark every box one-time-code, and spread a
multi-character value across the boxes (shared with the paste handler),
so a tapped autofill suggestion fills the whole code and submits.
@rzueger
rzueger merged commit c6fb724 into develop Jul 8, 2026
2 checks passed
@rzueger
rzueger deleted the fix-otp-ios-autofill branch July 8, 2026 20:45
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