otp-input-react
otp-input-react copied to clipboard
Focus not moving to next box while deleting and entering same text
Scenario: 4 number OTP.
Steps: Add 122, then tap cross to remove 2 on third digit, then in second digit enter 2 again as its shown as selected.
Expected Behaviour: The cursor is not moving to next field when I am entering the same number added in field.
Code:
<OTPInput
value={otp}
onChange={setOtp}
autoFocus
OTPLength={4}
otpType="number"
inputStyles={{
width: "15px",
height: "30px",
textAlign: "center",
margin: "5px 10px 10px 10px",
fontSize: "16px",
background: "none",
border: "none",
borderBottom: "1.6px solid #0D5C75",
borderRadius: "0px",
}}
style={{
border: "2px solid #285B72",
display: "flex",
flexDirection: "row",
width: "100%",
borderRadius: "4px",
justifyContent: "center",
}}
/>