Losing focus while typing inside an input - reactjs

Question

I've been trying to figure out why does my text input loses focus after typing one character through questions here and I have found no luck.
this bug occured after i added some CSS code.
this is the code :
import React, { useState } from "react";
import { v4 as uuidv4 } from "uuid";
import styled from "styled-components";
const App = () => {
const [input, setInput] = useState("");
const [todos, setTodos] = useState([
{ name: "Feed the dog", id: uuidv4() },
{ name: "Help mother", id: uuidv4() },
{ name: "Study", id: uuidv4() },
]);
const StyledList = styled.div`
justify-content: center;
text-align: center;
align-items: center;
max-width: 40%;
margin: 8rem auto;
box-shadow: red;
min-height: 60vh;
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 30px 30px 20px rgba(0, 0, 0, 0.3);
`;
const StyledButtonList = styled.div`
display: flex;
justify-content: center;
`;
const StyledTodo = styled.div`
display: flex;
flex-direction: column;
width: 30%;
margin: auto;
`;
const StyledButton = styled.button`
margin-left: 2%;
`;
const StyledP = styled.p`
display: flex;
justify-content: space-between;
`;
const clearAll = () => {
if (window.confirm("Do you want to delete all?")) {
setTodos([]);
}
};
const deleteTask = (id) => {
setTodos(todos.filter((todo) => todo.id !== id));
console.log(id);
};
return (
<StyledList>
<h1>What are the plans for today?</h1>
<form>
<input
type="text"
placeholder="Add Todo"
value={input}
onChange={(e) => setInput(e.target.value)}
></input>
<button
onClick={(e) => {
e.preventDefault();
setTodos([
...todos,
{
name: input,
id: uuidv4(),
},
]);
}}
>
Add
</button>
<h1>Your todos:</h1>
</form>
<StyledTodo>
{todos.map((todo) => {
return (
<StyledP>
{todo.name}{" "}
<StyledButtonList>
<StyledButton onClick={() => deleteTask(todo.id)}>
x
</StyledButton>{" "}
</StyledButtonList>
</StyledP>
);
})}
</StyledTodo>
<button onClick={() => clearAll()}> Remove all </button>
</StyledList>
);
};
export default App;
I have tried setting a key inside the input as some answers suggested but I still could not find a fix for this.
You help is very much appreciated!

Answer 1

With styled-components library it might look like you've just added a bit of CSS, while in fact you declared several new React components. And you declared them inside the component that uses them. The implication of this, is that these styled components are re-declared on each render. Each time you type one character, state of App changes and React re-renders it, during the render it re-declares StyledList, when React compares component tree you had before with a new one and notices that it is different, because old StyledList is not the same as new StyledList, so React creates everything from scratch, new StyledList and new input inside it. And the new input is not focused, because why would it?
TLDR move all const Styled outside of the App