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(() => {
        inputRef.current
            ?.focus();
    }, [currentOtpIndex])

    const handleOtpChange = ({
        target,
        key
    }, 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;
            setCurrentOtpIndex(curr_index);
        } else {
            if (curr_index < 5) {
                curr_index = curr_index + 1;
            }
        }
        setCurrentOtpIndex(curr_index);
        setOtp(newOtp);

    }

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

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

            }
            setCurrentOtpIndex(curr_index);
            setOtp(newOtp);
        }
    }

    return (
        <div
            className='fixed inset-0 bg-primary -z-10 flex justify-between items-center'>
            <Container>
                <form className='bg-secondary rounded p-6 space-y-6'>
                    <Title>Email Verification</Title>
                    <div className="flex space-x-6">
                        {otp.map((_, index) => {
                            return (<input
                                ref={(index === currentOtpIndex)
                                ? inputRef
                                : null}
                                key={index}
                                onChange={(e) => {
                                handleOtpChange(e, index)
                            }}
                                onKeyDown={(e) => {
                                handleKeyDown(e, index)
                            }}
                                value={otp[index]}
                                type="number"
                                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"/>)
                        })}
                    </div>                    
                    <Submit value="Verify"/>
                </form>
            </Container>
        </div>
    )
![1|690x403](upload://jb47qTOFt2bYYBy4GB9jyMQ049U.jpeg)
![2|690x378](upload://amJY7nNX6ByZE3FOkc3qEYtZIkj.jpeg)

}

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