React.Js Input Field looses the focus on every Keystroke - reactjs

Question

When I press a key for inputting the value, the text field loses the focus and I again need to click on the input field.
import React, { useState } from "react";
import styled from "styled-components";
import Button from "../../UI/Button/Button";
import "./CourseInput.css";
const CourseInput = (props) => {
const [enteredValue, setEnteredValue] = useState("");
const [isValid, setIsValid] = useState(true);
Here is the code to handle input field changes
const goalInputChangeHandler = (event) => {
if (event.target.value.trim().length > 0) {
setIsValid(true);
}
setEnteredValue(event.target.value);
};
Here is the code to handle the form submission.
const formSubmitHandler = (event) => {
event.preventDefault();
if (enteredValue.trim().length === 0) {
setIsValid(false);
return;
}
props.onAddGoal(enteredValue);
setEnteredValue("");
};
const FormControl = styled.form`
// ....some CSS
`;
return (
<form onSubmit={formSubmitHandler}>
<FormControl className={!isValid && " invalid"}>
<label>Course Goal</label>
<input
value={enteredValue}
type="text"
onChange={goalInputChangeHandler}
/>
</FormControl>
<Button type="submit">Add Goal</Button>
</form>
);
};
export default CourseInput;

Answer 1

I've tried to recreate your issue locally and wasn't able to.
However, I believe the input loses focus as you are setting isValid to true, triggering a re-render and therefor input focus gets lost.
Instead of setting isValid in goalInputChangeHandler, leverage useEffect hook, which will allow you to perform side effects (e.g. when changing the value of the input, a side effect is to update the isValid value) like below:
useEffect(() => {
if (enteredValue.length > 0) {
setIsValid(true);
} else {
setIsValid(false);
}
}, [enteredValue]);
const goalInputChangeHandler = (event) => {
setEnteredValue(event.target.value);
};
This also will allow you to update your submit function to be as follows:
const formSubmitHandler = (event) => {
event.preventDefault();
props.onAddGoal(enteredValue);
};
As the useEffect will ensure isValid is correctly updated.