edwardfxiao / react-codes-input Goto Github PK

I couldnt find any attribute to do copy & paste to this input field.
Is there a way for user to copy and paste the value to the input fields?
or if there is any onKeyUp/onKeyDown/onKeyPress, that might help as well I think.

Hi again,
I just encountered one more issue with typing in code on Android, it simply doesn't seem t do anything (see the video attached)
Also tested it with https://edwardfxiao.github.io/react-codes-input/ demo and had the same behaviour.

I tried with v2.1.7 and v2.1.8.

Do you have any suggestion how to overcome this issue, please ?
Thank you

I understand that the input field itself already auto uppercase (using props upper),
but how to enable shift key while user input the value?

current behavior shows nothing change when user hold shift while entering the value.
if it is not possible, is there any event listener such as key down or key up that I could override?

the best thing is
that there is no girlfriend TS, I can't take to my project(

Hi,
I keep seeing this error on any page I include ReactCodesInput element
I have react ^18.2, react-dom ^18.2 and react-codes-input ^2.1.5

I just return this in my component :
<ReactCodesInput initialFocus={false} codeLength={4} type="alphanumeric" hide={false} placeholder="#" />
and it causes the error:

I am using SSR

add this code to the component itself, which will intercept onSubmit

when you do not enter a number, the value disappears, but is written to the store, and if you erase the value, then when the numbers remain, then everything works correctly

start typing numbers first, then letters, an error will appear

key LEFT and RIGHT
the corresponding click moves the focus to the left or right

Hello,

I think we have encountered one more issue with Android + Chrome browser

When I type in the input, click submit and go to another page, I receive this error:

looks like it is coming from this part of the code

I tried to provide the wrapperRef parameter , but that didn't help.

Any suggestions about that, please ?

I am using ^2.1.9 version

Thank you !

Hi team,

I am struggling with one more issue.
I have multiple (two) ReactCodesInput components on the page and for some reason on Safari browser it focuses in the second one. I was trying to overwrite this behaviour specifying initialFocus={true}and {false} for the first and second one respectively and also by setting focus in the code on the created reference
pinWrapperRef1.current.firstChild.focus();
None of these helped.

I attach the code snippet with the component usage here:

`
<ReactCodesInput
initialFocus={true}
wrapperRef={$pinWrapperRef1}
id="tv-login-code1"
codeLength={4}
type="number"
hide={false}
placeholder="####"
value={pin1}
onChange={(res) => {
setPin1(res);
}}
classNameWrapper={styles.codeInputWrapper}
classNameEnteredValue={styles.codeEnteredValue}
customStyleComponent={{
marginRight: "2%",
width: "48%",
display: "inline-block",
}}
/>

        <ReactCodesInput
          initialFocus={false}
          wrapperRef={$pinWrapperRef2}
          id="tv-login-code2"
          codeLength={4}
          type="number"
          hide={false}
          placeholder="####"
          value={pin2}
          onChange={(res) => {
            setPin2(res);
          }}
          classNameWrapper={styles.codeInputWrapper}
          classNameEnteredValue={styles.codeEnteredValue}
          customStyleComponent={{
            marginLeft: "2%",
            width: "48%",
            display: "inline-block",
          }}
        />`

Could you take a look, please ?

I'll do it myself, on the weekend, or when I have time

when I set the type to the number but the keyboard showing alphabet . Check the screenshot

Hi
I am trying to set an initial state to the code input to a value from query parameters, but the submit button doesn't work in this case, even though I am able to see it properly typed in the field, the value is not bounded to the field.
Is there any work around for this ?

const [password, setPassword] = useState("xxxxxx");

<ReactCodesInput initialFocus={true} wrapperRef={$passwordWrapperRef} id="password" codeLength={6} type="alphanumeric" hide={false} value={password} onChange={(res) => { setPassword(res); }} customStyleComponent={{ maxWidth: "300px", margin: "0 auto" }} />

or even like this directly it doesn't work value={"123456"}

so basically unless I actually type it in, there is no way to set the value via code , is there ?