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>
)
}