drac94 / react-auth-code-input Goto Github PK

Even though each input has maxLength={1}, I am able to still type in more than 1 value for each input.
This happens:

1. After you complete all the inputs and continuously try to add more values. The values get appended to the last input.
2. If you input a value then click and go back to an input and attempt to add other values.

Each time you inline an object, React re-creates a new reference to this object on every render. This causes components that receive this object to treating it as a referentially different one. Thus, shallow equality on the props of this component will return false on every render cycle.

There are still cases where inline styles can be useful.

Hi, I'm using your library in my project
We have Sentry for monitoring, and recently we started to catch such issues

Issue itself is strange, as for Chrome 124.0.0 clipboardData API, according to can-i-use, is supported
I would assume this is custom security options selected by user, or any other strange setup

Anyway, I believe issue can be resolved by adding fallback for clipboardData to navigator.clipboard.readText(), in case clipboardData is unavailable. And adding try-catch block with empty string as fallback, in case API is unavailable for user

async function getPastedValue(e: ClipboardEvent<HTMLInputElement>) {
  try {
    if(e.clipboardData) {
      return e.clipboardData.getData('Text')
    }
    
    if(navigator.clipboard) {
      const pastedValue = await navigator.clipboard.readText();
      
      return pastedValue
    }
    
    return ''
  } catch(e) {
    return ''
  }
}

Hi,

Is there a way to detect if the user press the enter key in any input field of the auth-code-input to submit the code/form ?

Thx!

Hey! Great library.

Would be great to have a helper that knew if the current code is of a valid length.

Example:
— I have a 5 character input code in a form.
— I have a submit button at the bottom of my form.
— I want the button to be disabled unless the user has entered 5 characters.

To be clear, I'm not talking about validating the actual code, just validating the user's input. Basically, unless they've put in the required number of characters, I'd be able to check something like <button disabled={isAuthCodeValidLength}>

Going to probably use a container ref for this in the meantime.

Thanks!

Is there a way to change the input types to number?

I would like the be able to specify the inputmode for the inputs themselves. Using this attribute displays the number pad on iOS.

<AuthCode
            characters={6}
            inputMode='numeric'
/>

Hi, thank you for great package!

It would be great, if component gave option to disable inputs via prop. I am new to contributing to open source, but will try to help you out!

Hi! Thank you for good package!

I have in my requirements prefilling input by value passed in query params of page.
Component's api right now is "uncontrolled", so we can't pass value to props to render it. And we also don't bind input's state with external state, passed via props. Because of this I don't have any legit way to solve my requirement.

It looks like we could extend ref's api smth like setValue as clearInput.

I want to auto focus and cant do it in react way
add a ref for focus

Hello, I have just integrated this package, and I noticed that there is no way to clear the inputs programmatically. This would be useful as the code that the user types may be invalid and it would help them if they had a "clear" button somewhere on the page instead of manually having to do so.

i want to target input that have value with css

I am able to enter non-number values in Safari on macOS, even when allowedCharacters is set to numeric. It looks like when you enter a non numeric value, onChange is not triggered either.

I'd like to add a placeholder character to each input.
It would be good if we can pass true which would render ·(U+00B7) as the default placeholder character
Or pass '*' and it would use that character.

<AuthCode onChange={onChange} containerClassName='pin-input' length={4} allowedCharacters='numeric' />

You can put <input autocomplete="one-time-password" type="text" inputmode="numeric" pattern="\d*"/> for a 2fa input and you'll get a pretty nice setup as you can see in https://www.twilio.com/blog/html-attributes-two-factor-authentication-autocomplete

It would be nice to add those attributes to improve the UI - I made #27 to show how I think it should work from what I've seen in Slack's TOTP UI, but it looks like you need a bit more JS to hookup and let autocomplete work.

There should be a function or way to reset the input.

Hello ! I did not understand how I can style it ? My height is quite small. Thanks a lot for your work.

Hi there,

So, if I already have a code introduced and I try to paste another one it won't work, nothing will change. I looked through the code an it seems this thing is deliberately wanted that way. Any idea why?

Running React 18 the inputs are not being styled. Now that inputStyle is no more, how can we style the inputs?

<AuthCode onChange={(e) => { onChange(e); }} length={6} allowedCharacters="numeric" inputClassName="input" containerClassName='container' />

Hi, Safari works without any issues. However, in Chrome, when passing one-time-code, it fills only the first number and leaves the rest empty.

I wondered if it would be possible to change the range of React in peer dependencies to include 16 and 17 ?

Happy to open a PR if you are open to it !

In node 16+ we are unable to install this library alongside React 17 without using --force or legacyPeerDeps

The last release of this library was a year ago. Are there plans to continue updating it in the future to maintain dependencies and compatibility with newer versions of other libraries? Also, is the reason for the current halt in updates that there have been no critical issues since the last release?

I am considering incorporating this library into my project, so I would appreciate a prompt response.

Added arrow key traversal of inputs, for desktop user friendliness.
Accidentally created an issue. Please delete.