search

soywod / react-pin-field

📟 React component for entering PIN codes.
https://soywod.github.io/react-pin-field/
MIT License
412 stars 24 forks source link

[bug] React state not synced on event callbacks #45

Closed devjoseluis closed 2 years ago

devjoseluis commented 3 years ago

Description

React local state values don't get updated on the onChange event callback prop of the ReactPinField component.

Expected Behavior

The local state should be in sync when executing the onChange function.

Actual Behavior

The local state value isn't in sync when executing the onChange function.

Possible Fix

It is possible that mutating the original props object may cause this issue. https://github.com/soywod/react-pin-field/blob/133b5a5ed4de523f9572117229e80989eed65aa4/src/index.ts#L30

Steps to Reproduce

  1. Add a local state to your app. (ex. const [myState, setMyState] = useState("initialValue");).
  2. Define a function to handle the ReactPinField onChange event. (ex. onChange={myHandlerFunction}).
  3. Add a local state usage in the handler function. (ex. console.log(myState);).
  4. When the onChange event callback is triggered, the initial state value is logged in the console.
  5. Update your local state value.
  6. Trigger the onChange callback again; the console shows the initial state value instead of the updated value.

Environment

soywod commented 3 years ago

This may be linked to #44. The problem comes from the web component: React props are not sync with it. I will investigate. Thanks!

soywod commented 2 years ago

The native web component was a big mistake, it led to so many issues… I ended up rolling back to v1 state, without web component (pure React implementation). The issue should be fixed starting from the v3.0.11.