Skip to content

Conversation

sidoruk-sv
Copy link

@sidoruk-sv sidoruk-sv commented Sep 25, 2025

Description

When the OTP field is controlled and autoFocus is enabled, the component now aligns focus with the current value. This supports flows where an external input (e.g., a virtual keyboard) updates the value directly. For example, if value becomes "1", the second input is focused and ready for the next digit.

What changed

Added an effect that, on value change, focuses the input corresponding to the current value length.
This runs only when:

  • The component is controlled (value prop provided), and
  • autoFocus is true.

Why

In setups using virtual keyboards, the OTP field receives programmatic value updates and must keep the UI focus in sync so the next cell is immediately ready for entry.

Impact

No changes for uncontrolled usage or when autoFocus is false.
Backward compatible.

Tests

Updated tests to cover focus syncing on controlled value changes. Added story with "virtual keyboard-button"

Copy link

changeset-bot bot commented Sep 25, 2025

⚠️ No Changeset found

Latest commit: 3160028

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

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