Cannot find a way to retrieve the value of the input.

Should be fixed by updating nextra.

Currently, if you right-click the component, it renders the context menu for a div which doesn't allow pasting the code.

The workaround is Ctrl + V for pasting the code but right-click and paste would be preferred.

Make releases possible through GitHub Actions:

• full releases
• beta releases

First off, thank you for all the work on this component - made our implementation of this feature for MFA so quick and easy.

We had a reported bug related to using the autocomplete feature on Safari (both desktop and mobile) which results in sporadic behavior / failure of code entry into the inputs. After a lot of fun, painful I mean, debugging we determined that there appeared to be a race condition with focusing on the inputs and which input was actually selected.

it's worth noting that the code which was entered was 491879. As you can see, the code is not in order and thus values were entered and then replaced since the input focus wasn't firing constantly.

This was seen both on mobile and desktop safari browsers and we're trying to confirm if this was consistent on Chrome as well.

It would be great for additional props/add to the classNames prop so we can easily style vi__wrapper. e.g. I might want to center the verification input by applying width: 100%. I'm using SCSS modules so I want to avoid global styles.

As a workaround, I can wrap VerificationInput in a div, then style it with:

display: flex;
justify-content: center;

Mobile devices should scroll the input above the keyboard when focused. Currently the input might be hidden behind the keyboard.

Specifying class names like this

<VerificationInput
  inputProps={{ className: 'custom-class' }}
  containerProps={{ className: 'custom-class' }}
/>

overwrites the default class names of these elements, which messes up the component styles.

see discusstion in #77 (comment)

Hi,

Thanks for the awesome component 😄!

Unfortunately, I hit a little snag:

In your code, you expose the ref passthrough 🎉

But the definitions declare just a plain functional component

Could you please add the missing ref prop? or maybe make use of PropsWithoutRef<P> & RefAttributes<T> like here?
https://github.com/DefinitelyTyped/DefinitelyTyped/blob/9cc04052f7e17abbfb2a8a1636ff9fa456b01552/types/react/index.d.ts#L805

I'm using the ref to listen to paste events so that I can remove dashes from the clipboard text since I want to ignore them.
For now, it's ok since I can // @ts-ignore it

Want to use shortcut keys to copy, paste, and dynamically display it in input

In case the value does not need to be modified from the outside (e.g. clear value) the onChange callback should be possible to use without providing the value prop (this means the state is hidden inside the component).

especially mobile version

First things firts, great module!
I'm encountering a weird error. When building my app with vite build, the app crashes due to not managing to import this module since it is compiled to commonjs and not es-module.

Hi!

I have case when input looks as active, hovewer it is not focused anymore. This can be replicated when disabling input through inputProps, for exmaple during validation:

<VerificationInput inputProps={{ disabled: isValidatingPin }} />

The issue is that disabling input causes input to de-focus, however onBlur is not called (using Chrome).

If I understand correctly this callback is not invoked in such case: https://github.com/andreaswilli/react-verification-input/blob/master/src/index.js#L119C1-L122C15
and input still has "selected" class: https://github.com/andreaswilli/react-verification-input/blob/master/src/index.js#L73

I was wondering if there is some workaround to remove "vi__character--selected" class from input? I was thinking also about preparing PR with logic like below more or less:

useEffect(() => {
  if(inputProps.disabled != null) {
    setActive(!inputProps.disabled);
  }
}, [inputProps.disabled]);

What do you think? Many thanks for great lib and help!

As title suggests, thanks

• implement forwardRef to allow access to the text input
• simplify interface (props)
• remove unnecessary functionality to reduce complexity
• add more unit tests

I would like to display the caret, possibly as a bar.
This would be the default behaviour if the characters would use an <input/> as an HTML element.
Obtaining a similar result with just CSS is not super simple.

I would like to have something similar to the login that Slack is doing, attached below you can find a screenshot.

As you might notice, there's a "bar caret", which is helpful to catch the user's attention. This would be useful when especially when the autofocus is configured as "true".

Hi,
Is it possible to select one of the fields by clicking it? As far as I have tested, it's only possible to get to the next field by filling out the previous one. This means that the user cannot enter a different value in the first field without backspacing and removing all the other values.

how to make the current character inactive when there's no value and unselected?

As validation happens async, I would like to disable input/change until validation completes, but I couldn't find a way to disable input. Any suggestions?

Currently, the OTP input component allows deletion of the entire code with backspace, but it lacks the ability to select and delete specific characters. It would be beneficial to include this feature in future updates for improved user experience and functionality.

Problem

When trying to use react-verification-input with react v17 (and react-dom v17) the following error occurs because of the dependency to react v16:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Possible Solution

Turn react and react-dom dependencies into peerDependencies. This should fix the issue, because it will use the provided copy of react instead of bringing its own.

can't type or paste codes starting with 00

Not sure if anyone addressed this issue but I have a problem with the Autocomplete on Safari.
Steps to reproduce:
0. Open Safari on iPhone and enter credentials on the website.

1. Get an SMS code from the service
2. Select the first input box
3. Click autofill
4. The field gets populated and breaks for no reason.

Happening only on iPhones and Safari.

I also tried on Chrome the same thing and it works fine.
In my case, it doesn't do anything just returns me back to the login screen.

Thanks for the help.

Add (or move from README):

• config examples
• style examples

• should be completely hidden, but has a black border by default
• should be overlayed exactly on top of visible elements, but gets shifted by text-align: center

see discusstion in #77 (comment)

Hey!
Firstly, I would like to congratulate you for the library. This was exactly what I was looking for! 🫶

I'd like to suggest the implementation of an optional prop onComplete (we can figure out a better name if necessary) that will call a function when the last input is filled. For example, let's suppose we have a code validation form with 4 digits. When the user enters the 4th digit, I would like to automatically call and endpoint to validate the code, without the need to click on anything or submit a form.

Do you think it makes sense to be added?
I can work on the implementation if necessary.

Thank you 🤠

When the user receives the sms code, you can see it on top of your keyboard inside you mobile app. If you press the code, it gets sent to the input, but only in that white box that you see when you have the debug set as true.

see badges/shields#8671

Red spell check line should not be visible:

Tested in Edge (Windows 10)

Edge browser automatically shows a little eye icon for every type="password" input element. However, it does not currently work with react-verification-input and is also placed incorrectly.

Because this is non-standard behavior (Edge is the only browser doing this) the icon should be hidden if possible.

Not necessary anymore, since the hidden input is now in the same place as the visible part.

Is there any way to change the input type?

Would be really helpful if we could change it to 'tel'.

<input type="tel" />

This means that on hybrid apps it would open the numeric keyboard which I believe it's a must.

Thanks!

• Update outdated dependencies
• Remove unneeded dependencies

• Users should be able to override library styles by default
• removeDefaultStyles should be removed

This could be the solution: https://developer.mozilla.org/en-US/docs/Web/CSS/:where