I developed a website using React and added a contact form at the end. When the website is viewed in android mobile phones, there is a bug. If user clicks on any input box or text area, website automatically scrolls up.
I have not added any link or anchor tag to input boxes still it behaves unexpectedly. I searched on the issue and it is something related to bug in android native browser, the page resizes when it tries to open soft keyboard. I don’t face the same issue when site is being viewed on Laptop or ios devices.
Here’s link to the website:
https://dronzer03.github.io/athang-portfolio/
Code:
<div>
<h4>Leave me a message or feedback:</h4>
</div>
<div className="form">
<div>
<label>Name:</label>
</div>
<div>
<input id="name" value={from} onChange={changeFrom} onFocus={onFocusChange} />
</div>
<div>
<label>Email:</label>
</div>
<div>
<input id="mail" value={email} onChange={changeEmail} />
</div>
<div>
<label>Message/Feedback:</label>
</div>
<div>
<textarea id="msg" value={msg} onChange={changeMsg} />
</div>
<div>
<Button className="btns" onClick={sendMail}>
Send
</Button>
</div>
</div>
</div>