JulSeb42
JulSeb42

Reputation: 307

Why does my React page scrolls every time I'm typing inside an input?

I'm working on a form in React, and every time I'm typing anything inside an input the page scrolls to the top. Does anyone have a solution to this problem? This my code:

const [fullName, setFullName] = useState()
const handleFullName = e => setFullName(e.target.value)

return (
    <Input
        id="fullName"
        onChange={handleFullName}
        value={fullName}
    />
)

Thanks for your answers!

EDIT:

From what I see it comes from the setState function, and the bug appears only on Chrome

Upvotes: 0

Views: 1346

Answers (2)

Andy Gonzalez
Andy Gonzalez

Reputation: 96

Provide more details please where are you getting that Input and Form Components from? Next? Material? I see they are not native...

Nothing you are doing there makes the code scroll Please check this stackblitz example https://stackblitz.com/edit/react-rdklvk

Upvotes: 0

Johan Petrikovsky
Johan Petrikovsky

Reputation: 130

The problem is obviously somewhere else, maybe there is a rerender, with that rerender, the page goes back to its initial position. Is there another state that "listen" to this state ?

Upvotes: 1

Related Questions