Mobile Web Safari: Adds auto scroll back - Issue 5894

src/App.js

@@ -10,6 +10,7 @@ import OnyxProvider from './components/OnyxProvider';
 import HTMLEngineProvider from './components/HTMLEngineProvider';
 import ComposeProviders from './components/ComposeProviders';
 import SafeArea from './components/SafeArea';
+import './libs/autoScrollback';
 
 LogBox.ignoreLogs([
     // Basically it means that if the app goes in the background and back to foreground on Android,

src/libs/autoScrollback/index.js

@@ -0,0 +1,4 @@
+/* autoScrollBack address Mobile Safari-specific issues when the user overscrolls the window while the keyboard is visible */
+/* it has no effect to other platforms */
+
+export default () => {};

src/libs/autoScrollback/index.web.js

@@ -0,0 +1,56 @@
+/* autoScrollBack address Mobile Safari-specific issues when the user overscrolls the window while the keyboard is visible */
+import Str from 'expensify-common/lib/str';
+
+import getBrowser from '../getBrowser';
+
+const init = () => {
+    if (getBrowser() !== 'safari') {
+        return;
+    }
+    const userAgent = navigator.userAgent.toLowerCase();
+
+    if (Str.contains(userAgent, 'iphone os 1')) {
+        const innterHeightWithoutKeyboard = window.innerHeight;
+
+        let waitingForScrollAfterFocus = false;
+
+        let maxScrollY = 0;
+
+        const isIos15 = Str.contains(userAgent, 'iphone os 15_');
+
+        let isTouching = false;
+
+        const scrollback = () => {
+            if (!maxScrollY) {
+                return;
+            }
+            if (!isTouching && window.scrollY > maxScrollY) {
+                window.scrollTo({top: maxScrollY, behavior: 'smooth'});
+            }
+        };
+
+        document.addEventListener('touchstart', () => {
+            isTouching = true;
+        });
+        document.addEventListener('touchend', () => {
+            isTouching = false;
+            scrollback();
+        });
+        document.addEventListener('scroll', () => {
+            if (waitingForScrollAfterFocus && !maxScrollY) {
+                waitingForScrollAfterFocus = false;
+                const keyboardHeight = innterHeightWithoutKeyboard - window.visualViewport.height;
+                maxScrollY = keyboardHeight + (isIos15 ? 52 : 0);
+            }
+            scrollback();
+        });
+        document.addEventListener('focusin', () => {
+            waitingForScrollAfterFocus = true;
+        });
+        document.addEventListener('focusout', () => {
+            waitingForScrollAfterFocus = false;
+        });
+    }
+};
+
+init();