OTP Input Common Bugs and Fixes

OTP Input Common Bugs and Fixes

Here are common bugs in OTP input implementations and how to fix each one.

Bug 1: Backspace Does Not Go to Previous

Cause: only checking e.key === "Backspace" without checking if the current input is empty.

Fix: check !e.target.value before focusing the previous:

if (e.key === "Backspace" && !e.target.value && index > 0) {
  inputs[index - 1].focus();
}
``
### Bug 2: Paste Fills Only the First Input

**Cause**: not calling `e.preventDefault()`, so the browser does the default paste.

**Fix**: call `e.preventDefault()` and manually distribute the pasted text:

```js
e.preventDefault();
const pasted = e.clipboardData.getData("text").replace(/\D/g, "");
``
### Bug 3: Non-Numeric Characters Accepted

**Cause**: no filtering on input.

**Fix**: filter on every input event:

```js
e.target.value = e.target.value.replace(/\D/g, "");
``
### Bug 4: Focus Goes Beyond the Last Input

**Cause**: not checking `index < inputs.length - 1` before focusing next.

**Fix**: add the boundary check:

```js
if (value && index < inputs.length - 1) {
  inputs[index + 1].focus();
}
``
### Bug 5: Verify Button Never Enables

**Cause**: not calling `checkComplete()` after every input change.

**Fix**: call `checkComplete()` at the end of every input handler:

```js
input.addEventListener("input", (e) => {
  // ... handle input ...
  checkComplete();
});
``
### Bug 6: Arrow Keys Do Not Work

**Cause**: listening on `keydown` instead of `keyup`, or not handling ArrowLeft/ArrowRight.

**Fix**: add a `keyup` listener for arrow keys:

```js
input.addEventListener("keyup", (e) => {
  if (e.key === "ArrowLeft" && index > 0) inputs[index - 1].focus();
  if (e.key === "ArrowRight" && index < inputs.length - 1) inputs[index + 1].focus();
});
``
### The Takeaway

Common OTP bugs: backspace not going to previous (check empty), paste filling only first (preventDefault), non-numeric accepted (regex filter), focus beyond last (boundary check), verify never enables (call checkComplete), and arrow keys not working (keyup listener). Fix each with the appropriate check or handler.