-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Open
Labels
Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possibleIssue will be reviewed by Core Team and a relevant label will be added as soon as possible
Description
Describe the bug
Description
When using the InputOtp component, the value in the onValueChange callback is returned incorrectly.
Actual Behavior
The changes made are not applied immediatly, only at the next change.

Additional information
This is due to the operation of the useState hook.
The set function only updates the state variable for the next render. If you read the state variable after calling the set function, you will still get the old value that was on the screen before your call.
Reproducer
No response
System Information
System:
OS: macOS 26.0.1
CPU: (8) arm64 Apple M3
Memory: 530.36 MB / 24.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.14.0 - /usr/local/bin/node
Yarn: 1.22.22 - /usr/local/bin/yarn
npm: 10.9.2 - /usr/local/bin/npm
pnpm: 10.18.3 - /Users/dnikiforov/Library/pnpm/pnpm
bun: 1.3.0 - /Users/dnikiforov/.bun/bin/bun
Browsers:
Firefox: 139.0.1
Safari: 26.0.1Steps to reproduce the behavior
- Install [email protected]
- Import InputOtp component into the project
- Insert the code from the basic example
- Add a state variable for the input value
- Add the onValueChange prop to component
- In the onValueChange callback, call the state variable set function
- look in the react devtools
Expected behavior
the value changes immediately
Metadata
Metadata
Assignees
Labels
Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possibleIssue will be reviewed by Core Team and a relevant label will be added as soon as possible