Add or expose key press or key down event

[CaptainT33mo]

• Describe the Feature Request I want to use the OTP input field without a form and want a key down or keypress event to track the Enter Key so that I can submit the value when the enter key is pressed.
• Describe Preferred Solution

           ...
           onKeyDown={keydown}
           ...
       />```

[iamaamir]

same here

[kumarsandeep91]

Same here

[ibash]

workaround: wrap the component in a div and put a keydown handler on that

[CaptainT33mo]

@ibash that workaround works well. Also, you can do the same thing by putting that component inside a form and listening to the onSubmit event of the form, which is what I did in my project.

[g-ravity]

Hi, is this issue up for grabs? Then I would like to work on it.

[ibash]

Do it!

[g-ravity]

Okay, I'll start working on it.

[haseena-hassan]

Is the issue still not done? I would like to take it

[denishrana09]

Use it like this:

                      <div>
                        <form onSubmit={handleOtpSubmit}>
                          <OtpInput
                            hasErrored={hasErrored}
                            errorStyle='two-fa-otp-error'
                            value={otp}
                            onChange={handleChange}
                            numInputs={6}
                            isInputNum={true}
                            containerStyle='two-fa-otp-input'
                            shouldAutoFocus
                          />
                          <Button className='d-none' type='submit' />
                        </form>
                      </div>

that way, on enter, you will get event in handleOtpSubmit