Input loses focus on state change

Asked Mar 27 '20 at 15:21

Active Mar 27 '20 at 15:38

Viewed 133 times

I have an input in a nested component. The state for that component is in its parent component. (The state can't be in the child component.) The problem is every input change, it loses focus, and the user has to click back on the input. I tried wrapping SearchComponent in React.memo, but it still didn't work. What am I doing wrong and how can I fix it?

Parent Component

const MainTable = props => {
const [myString, setMyString] = useState('');

const changeHandler = value => {
    setMyString(value);
}

<MyInputComponent
    changeHandler={changeHandler}
    myString={myString}
/>

Nested Component

const SearchComponent = props => {
    const [searchQuery, setSearchQuery] = useState('');

    return (
        <input
            type='text'
            value={props.myString}
            onChange={e => {
                props.changeHandler(e.target.value);
            }}
        />
    );
};

edited Mar 27 '20 at 15:38

asked Mar 27 '20 at 15:21

Jessica

9,379
14
65
136

use `ref` for focus, read docs – xadm Mar 27 '20 at 15:33
It is because you re-render your children everytime your parent component renders – Salmin Skenderovic Mar 27 '20 at 15:35
2

I suppose you are not sharing the full code. Because when I try the code you have written in above, it works and not loosing focus. – oakar Mar 27 '20 at 15:35
@xadm Can you send a link to the docs? – Jessica Mar 27 '20 at 15:39
@SalminSkenderovic Yes, that's the reason. But what's the sollution? – Jessica Mar 27 '20 at 15:40
https://stackoverflow.com/questions/53188507/react-set-focus-on-componentdidmount-how-to-do-it-with-hooks – Salmin Skenderovic Mar 27 '20 at 15:40
4

prepare [example] – xadm Mar 27 '20 at 16:01

Input loses focus on state change

0 Answers0