Move to next input after maxlength react functional component - reactjs

Question

I am Using react-Hook-form, I have a scenario for a phone number that has three Input Field XXX-XXX-XXXX. I want to shift focus from the first input to the next after it reaches maxlength===3.please suggest a solution to auto Focus on the next phone input after reaches max length. working on react functional component.
Here is the code,
import React from 'react';
import { useForm } from "react-hook-form";
export function PhoneInput(props) {
const {
register,
handleSubmit,
watch,
clearErrors,
formState: { errors }
} = useForm();
return (
<form className="review-your-info-form" id="purchase-form" onSubmit={handleSubmit(onSubmit)} noValidate>
<div className="field">
{ (errors.phone1 || errors.phone2 || errors.phone3) && <div className="error-msg"><span className="required">{errors.phone1?.message || errors.phone2?.message || errors.phone3?.message}</span></div>}
<label htmlFor="phone1">Phone *</label>
<div className="phone-group flex">
<input
id="phone1"
type="tel"
className="phone1"
maxLength="3"
onClick={() => clearErrors("phone1")}
{...register("phone1",{
required: 'phone-error',
minLength: {
value: 3,
message: 'phone-error'
},
pattern: {
value: /[2-9][0-9]{2}$/,
message: 'phone-error'
},
})}
/>
<input
type="tel"
className="phone2"
maxLength="3"
onClick={() => clearErrors("phone2")}
{...register("phone2",{
required: 'phone-error',
minLength: {
value: 3,
message: 'phone-error'
},
pattern: {
value: /[2-9][0-9]{2}$/,
message: 'phone-error'
},
})}
/>
<input
type="tel"
className="phone3"
maxLength="4"
onClick={() => clearErrors("phone3")}
{...register("phone3",{
required: 'phone-error',
minLength: {
value: 4,
message: 'phone-error'
},
pattern: {
value: /^[0-9]*$/i,
message: 'phone-error'
},
})}
/>
</div>
</div>
</form>
)}```

Answer 1

To move focus in React you could use useRef hook:
import React, { useState, useRef } from 'react';
import { useForm } from "react-hook-form";
export function PhoneInput(props) {
const [input, setInput] = useState();
const {
register,
handleSubmit,
watch,
clearErrors,
formState: { errors }
} = useForm();
const inputToFocus = useRef(); //<-- create ref
const handleChange = (e) => {
setInput(e.target.value);
if (e.target.value.length >= 3) inputToFocus.current.focus(); //<--- focus second input
}
return (
<form className="review-your-info-form" id="purchase-form" onSubmit={handleSubmit(onSubmit)} noValidate>
<div className="field">
{ (errors.phone1 || errors.phone2 || errors.phone3) && <div className="error-msg"><span className="required">{errors.phone1?.message || errors.phone2?.message || errors.phone3?.message}</span></div>}
<label htmlFor="phone1">Phone *</label>
<div className="phone-group flex">
<input
value={input}
onChange={handleChange} //<-- edit input
id="phone1"
type="tel"
className="phone1"
maxLength="3"
onClick={() => clearErrors("phone1")}
{...register("phone1",{
required: 'phone-error',
minLength: {
value: 3,
message: 'phone-error'
},
pattern: {
value: /[2-9][0-9]{2}$/,
message: 'phone-error'
},
})}
/>
<input
ref={inputToFocus} //<-- assing ref
type="tel"
className="phone2"
maxLength="3"
onClick={() => clearErrors("phone2")}
{...register("phone2",{
required: 'phone-error',
minLength: {
value: 3,
message: 'phone-error'
},
pattern: {
value: /[2-9][0-9]{2}$/,
message: 'phone-error'
},
})}
/>
<input
type="tel"
className="phone3"
maxLength="4"
onClick={() => clearErrors("phone3")}
{...register("phone3",{
required: 'phone-error',
minLength: {
value: 4,
message: 'phone-error'
},
pattern: {
value: /^[0-9]*$/i,
message: 'phone-error'
},
})}
/>
</div>
</div>
</form>
)}
Explanation: the first input has to pass the focus to the second input when value reach length of 3 so:
I create a inputToFocus ref and assign to the second input;
then I create handleChange function to: set the first input value and, in case of value length >= 3, move the focus to second input using ref previously created.