Issue with last input field

[salmabader]

Hi 👋🏻,

Firstly, thanks for your efforts in this library, it is really useful

I faced an issue with the last input field, when I try to clear it, the last two fields are cleared and this causes calling the onComplete twice.
I tried to figure out the issue, but I didn't reach any solution :(

• I'm using React with Next.js and Tailwind and I'm calling a custom function onComplete: onComplete={handleVerify}
  <PinField autoFocus ref={codeRef} onComplete={handleVerify} className='w-full rounded-md text-center placeholder:text-xs placeholder:text-gray-300 bg-my-gray border-gray-300 transition-all ease-soft-spring focus:shadow-md focus:ring-1 focus:shadow-sky-200 focus:outline-none hover:bg-my-200' id="code" placeholder='○' validate={/^[0-9]$/} />

[soywod]

I faced an issue with the last input field, when I try to clear it, the last two fields are cleared and this causes calling the onComplete twice.

I cannot reproduce this behaviour using the demo page. Could you provide a full working example so I can debug it?

[salmabader]

I just try it on production and it is working properly
I'm facing this issue on my local only

[soywod]

I'm facing this issue on my local only

I think it is a duplicate of <#92>.

[soywod]

Duplicate #92 confirmed, a fix is on its way.

[soywod]

I dived a bit more into this issue, and it turns out that it is not a duplicate of #92. Although it is related to it: the React strict mode revealed a misconception in the structure of the PIN field, which led to the issue you encountered on the last input. I needed to refactor a lot of things, see #94.

I just released the v4.0.0 which includes the fix (but also breaking changes, see CHANGELOG).