Moving Backward in OTP Field

This is my below code for submiting 6 digit OTP. Each field accepts single digit.This is working fine in
forwarding motion, that means if I enter any value in first, its navigating to second. Then when I enter
any digit in second field its moving to third and this is happening perfectly until the last digit.

Problem i am facing here is , If I have to move backward, to any field and remove any digit.
When I am pressing “backspace” key, its making the previous field null but my focus does not get shifted to that
previous field. My focus still stays in the current field where I pressed “backspace”.

For example: If I am on the 4th field when I am pressing the backspace key to move backward then its just clearing 3rd field without actually moving on to it.

import React, {useEffect, useRef, useState} from 'react'
import Container from '../Container'
import Title from '../form/Title'
import Submit from '../form/Submit'

const OTP_LENGTH = 6
let curr_index = 0;
export default function EmailVerification() {
    const [otp,
        setOtp] = useState(new Array(OTP_LENGTH).fill(""))
    const [currentOtpIndex,
        setCurrentOtpIndex] = useState(0);
    const inputRef = useRef();

    useEffect(() => {
    }, [currentOtpIndex])

    const handleOtpChange = ({
    }, ind) => {
        const newOtp = [...otp];
        const newValue = target.value;
        newOtp[ind] = newValue.substring(newValue.length - 1, newValue.length);
        if (key === "Backspace") {
            curr_index = curr_index - 1;
        } else {
            if (curr_index < 5) {
                curr_index = curr_index + 1;


    const handleKeyDown = ({
    }, index) => {
        if (key === "Backspace") {
            const newOtp = [...otp];
            newOtp[currentOtpIndex] = "";

            if (curr_index > 0) {
                curr_index = curr_index - 1;


    return (
            className='fixed inset-0 bg-primary -z-10 flex justify-between items-center'>
                <form className='bg-secondary rounded p-6 space-y-6'>
                    <Title>Email Verification</Title>
                    <div className="flex space-x-6">
                        {, index) => {
                            return (<input
                                ref={(index === currentOtpIndex)
                                ? inputRef
                                : null}
                                onChange={(e) => {
                                handleOtpChange(e, index)
                                onKeyDown={(e) => {
                                handleKeyDown(e, index)
                                className="w-12 h-12 outline-none rounded border-dark-subtle focus:border-white transition
                                                bg-transparent text-xl font-semibold border-2 text-center text-white"/>)
                    <Submit value="Verify"/>


This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.