Skip to content

[OneTimePasswordField] Paste Exceeding Max Length Is Not Truncated #3550

Open
@ohprettyhak

Description

@ohprettyhak

Bug report

Current Behavior

Regardless of how many <OneTimePasswordField.Input> elements are rendered, if you copy and paste text into the field, all of the pasted characters are inserted, even beyond the intended length.

Expected behavior

Any characters beyond the configured number of inputs should be truncated—excess text should not be added to the field.

Reproducible example

  1. Navigate to the Radix UI One Time Password Field demo:
    https://www.radix-ui.com/primitives/docs/components/one-time-password-field
  2. Copy a string of more than 6 digits.
  3. Click into the OTP field and paste.
  4. Observe that all digits appear, overflowing the intended 6-character limit.

Suggested solution

On value change (e.g. in the onValueChange handler), verify the new value’s length and slice it to the maximum allowed length before updating state.

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-one-time-password-field ^0.1.6
React n/a ^19.1.0
npm/yarn/pnpm pnpm 10.11.0

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions