Skip to content

V11: @primereact/headless: InputOtp value is not reflecting immediatly #8404

@dmitrii-nikiforov

Description

@dmitrii-nikiforov

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.
Image

Image Image

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.1

Steps to reproduce the behavior

  1. Install [email protected]
  2. Import InputOtp component into the project
  3. Insert the code from the basic example
  4. Add a state variable for the input value
  5. Add the onValueChange prop to component
  6. In the onValueChange callback, call the state variable set function
  7. look in the react devtools

Expected behavior

the value changes immediately

Metadata

Metadata

Assignees

No one assigned

    Labels

    Status: Needs TriageIssue will be reviewed by Core Team and a relevant label will be added as soon as possible

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions