Situation:
I’m making a ReactJS app with a sequence of enter fields halfway down the web page. These fields have been positioned in order that the digital keyboard would not battle with them. Nevertheless, after I deal with the textfields on an Apple system, the viewport is scrolled such that the enter fields are vertically centered. I wish to disable this in order that the web page stays unaffected and the digital keyboard simply covers the underside of the web page. I’m utilizing ReactJs, Typescript, and mui for the TextField.
Code Sandbox
I’ve created a simplified instance of this downside within the under Sandbox. It is simply create-react-app with mui.
https://codesandbox.io/s/serene-morning-38b4xi?file=/public/index.html
I’ve tried:
- setting a container ingredient to
place:mounted - including a
window.ScrollTo(0,0)occasion toonFocus
from: iOS Safari: Forestall (or Management) Scroll on Enter Focus
and
Find out how to stop iOS keyboard from pushing the view off display screen with CSS or JS
from: Disable auto scroll on Safari iOS16 and iOS 15 + single tab enabled
-ensuring meta tag is ready to:
<meta identify="viewport" content material="viewport-fit=cowl, shrink-to-fit=no, minimum-scale=1, initial-scale=1, width=device-width" />
This is the code:
App.tsx:
import { TextField } from "@mui/materials";
export default perform App() {
return (
<div model={{ place: "mounted", peak: "100%", width: "100%" }}>
<div model={{ place: "absolute", high: "300px" }}>
<TextField
fullWidth
variant="crammed"
autoComplete="off"
onChange={() => {}}
onFocus={() => {
setTimeout(() => window.scrollTo(0, 0), 50);
}}
worth={"take a look at"}
/>
</div>
</div>
);
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
identify="viewport"
content material="viewport-fit=cowl, minimum-scale=1, width=device-width, initial-scale=1"
/>
<meta identify="theme-color" content material="#000000" />
<!--
manifest.json supplies metadata used when your net app is added to the
homescreen on Android. See https://builders.google.com/net/fundamentals/engage-and-retain/web-app-manifest/
-->
<hyperlink rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<hyperlink rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<!--
Discover using %PUBLIC_URL% within the tags above.
It will likely be changed with the URL of the `public` folder throughout the construct.
Solely recordsdata contained in the `public` folder might be referenced from the HTML.
Not like "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work accurately each with client-side routing and a non-root public URL.
Discover ways to configure a non-root public URL by working `npm run construct`.
-->
<title>React App</title>
</head>
<physique>
<noscript>
It's essential to allow JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
In the event you open it immediately within the browser, you will note an empty web page.
You may add webfonts, meta tags, or analytics to this file.
The construct step will place the bundled scripts into the <physique> tag.
To start the event, run `npm begin` or `yarn begin`.
To create a manufacturing bundle, use `npm run construct` or `yarn construct`.
-->
</physique>
</html>
