Tenho um componente com dois inputs. Quando o valor de um desses é alterado, o estado do componente pai é atualizado forçando a re-renderização dos filhos e, com isso, o foco do teclado sai do input que estava recebendo texto. Quero que o foco mantenha-se sobre o mesmo input.
Tentei colocar a propriedade autoFocus em cada um, porém após a renderização o foco recai sempre sobre o
Sugestões de como resolver?
Componente
const TodoItem = ({ tagsList, todo, todoIndex, addNewTodo, idBuilder }) => {
// Propriedades do objeto todo
const { title, body, tag, status, isValid } = todo;
const isInitialMount = useRef(true);
const [todoItemState, dispatchTodoItem] = useReducer(todoItemReducer, {
title: title,
body: body,
tag: tag,
status: status,
isValid: isValid
});
const {tag: todoTag, status: todoStatus} = todoItemState;
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
} else {
addNewTodo(todoIndex, todoItemState);
}
});
function inputChangeHandler(event, type) {
dispatchTodoItem({type: type, val: event.target.value});
}
function statusChangeHandler() {
dispatchTodoItem({type: TODO_STATUS});
}
function handleButtonType() {
if (todoItemState.status === false && todoItemState.isValid === false) {
return 'Cancel'
}
if (todoItemState.status === false && todoItemState.isValid === true) {
return 'Feito'
}
return 'Edit';
}
return (
<TodoItemStyled>
// ============VEJA AQUI=============
<InputTitle
defaultValue={title}
disabled={todoItemState.status}
onChange={(e) => inputChangeHandler(e, TODO_TITLE)}
autoFocus
/>
<InputTextArea
defaultValue={body}
disabled={todoItemState.status}
onChange={(e) => inputChangeHandler(e, TODO_BODY)}
autoFocus
/>
// =========================
{
!todoItemState.status
&&
<select onChange={(e) => inputChangeHandler(e, TODO_TAG)} value={todoTag}>
{tagsList.map(tag => {
const {tagName} = tag;
return (
<option key={idBuilder()}>{tagName}</option>
)
})}
</select>
}
<button
onClick={(e) => {
e.preventDefault();
statusChangeHandler();
}}
>
{handleButtonType()}
</button>
</TodoItemStyled>
);
}
export default TodoItem;