The answer
Because you are not checking if the current input is empty before focusing the previous. The fix: if (e.key === 'Backspace' && !e.target.value && index > 0) inputs[index - 1].focus(). Only go back when the current input is already empty.
OTP Input Common Bugs and Fixes
Why does backspace not go to the previous input in my OTP component?
More FAQs in OTP Input Common Bugs and Fixes
Because you are not calling e.preventDefault(). The browser does the default paste, which fills only the current input (and truncates to maxlength=1). Call e.preventDefault() and manually distribute the pasted text across the inputs.
Because you are not filtering non-numeric characters. Add e.target.value = e.target.value.replace(/\D/g, '') on the input event. This removes all non-digit characters.
Because you are not calling the completion check after every input change. Add checkComplete() at the end of every input handler. The function should check if all inputs have a value and enable/disable the button.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.