shubhanus / otp-input-react

React simple otp input with react hooks
MIT License
59 stars 85 forks source link

Focus not moving to next box while deleting and entering same text #67

Open SmritiSYadav opened 1 year ago

SmritiSYadav commented 1 year ago

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",
              }}
            />