Why does paste fill only the first input in my OTP component?
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.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in OTP Input Common Bugs and Fixes
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.
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