From 3f2769aa0fd813d3ae3d46cf6e87dd11ca6d6312 Mon Sep 17 00:00:00 2001
From: Elias Nahum <nahumhbl@gmail.com>
Date: Thu, 16 Feb 2023 14:00:26 +0200
Subject: [PATCH] allow scrolling in the login screen when keyboard is opened
 (#7144)

---
 app/screens/login/form.tsx  | 57 +++----------------------------------
 app/screens/login/index.tsx |  4 +--
 2 files changed, 5 insertions(+), 56 deletions(-)

diff --git a/app/screens/login/form.tsx b/app/screens/login/form.tsx
index b58a27b184..960ec4b1d9 100644
--- a/app/screens/login/form.tsx
+++ b/app/screens/login/form.tsx
@@ -2,9 +2,9 @@
 // See LICENSE.txt for license information.
 
 import {useManagedConfig} from '@mattermost/react-native-emm';
-import React, {MutableRefObject, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {useIntl} from 'react-intl';
-import {Keyboard, Platform, TextInput, TouchableOpacity, useWindowDimensions, View} from 'react-native';
+import {Keyboard, TextInput, TouchableOpacity, View} from 'react-native';
 import Button from 'react-native-button';
 
 import {login} from '@actions/remote/session';
@@ -14,7 +14,6 @@ import FloatingTextInput from '@components/floating_text_input_label';
 import FormattedText from '@components/formatted_text';
 import Loading from '@components/loading';
 import {FORGOT_PASSWORD, MFA} from '@constants/screens';
-import {useIsTablet} from '@hooks/device';
 import {t} from '@i18n';
 import {goToScreen, loginAnimationOptions, resetToHome, resetToTeams} from '@screens/navigation';
 import {buttonBackgroundStyle, buttonTextStyle} from '@utils/buttonStyles';
@@ -23,13 +22,10 @@ import {preventDoubleTap} from '@utils/tap';
 import {changeOpacity, makeStyleSheetFromTheme} from '@utils/theme';
 
 import type {LaunchProps} from '@typings/launch';
-import type {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 
 interface LoginProps extends LaunchProps {
     config: Partial<ClientConfig>;
-    keyboardAwareRef: MutableRefObject<KeyboardAwareScrollView | null>;
     license: Partial<ClientLicense>;
-    numberSSOs: number;
     serverDisplayName: string;
     theme: Theme;
 }
@@ -53,6 +49,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
     forgotPasswordBtn: {
         borderColor: 'transparent',
+        width: '50%',
     },
     forgotPasswordError: {
         marginTop: 30,
@@ -76,10 +73,8 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     },
 }));
 
-const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
+const LoginForm = ({config, extra, serverDisplayName, launchError, launchType, license, serverUrl, theme}: LoginProps) => {
     const styles = getStyleSheet(theme);
-    const isTablet = useIsTablet();
-    const dimensions = useWindowDimensions();
     const loginRef = useRef<TextInput>(null);
     const passwordRef = useRef<TextInput>(null);
     const intl = useIntl();
@@ -94,33 +89,6 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
     const usernameEnabled = config.EnableSignInWithUsername === 'true';
     const ldapEnabled = license.IsLicensed === 'true' && config.EnableLdap === 'true' && license.LDAP === 'true';
 
-    const focus = () => {
-        if (Platform.OS === 'ios') {
-            let ssoOffset = 0;
-            switch (numberSSOs) {
-                case 0:
-                    ssoOffset = 0;
-                    break;
-                case 1:
-                case 2:
-                    ssoOffset = 48;
-                    break;
-                default:
-                    ssoOffset = 3 * 48;
-                    break;
-            }
-            let offsetY = 150 - ssoOffset;
-            if (isTablet) {
-                const {width, height} = dimensions;
-                const isLandscape = width > height;
-                offsetY = (isLandscape ? 230 : 150) - ssoOffset;
-            }
-            requestAnimationFrame(() => {
-                keyboardAwareRef.current?.scrollToPosition(0, offsetY);
-            });
-        }
-    };
-
     const preSignIn = preventDoubleTap(async () => {
         setIsLoading(true);
 
@@ -231,19 +199,6 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
         passwordRef?.current?.focus();
     }, []);
 
-    const onBlur = useCallback(() => {
-        if (Platform.OS === 'ios') {
-            const reset = !passwordRef.current?.isFocused() && !loginRef.current?.isFocused();
-            if (reset) {
-                keyboardAwareRef.current?.scrollToPosition(0, 0);
-            }
-        }
-    }, []);
-
-    const onFocus = useCallback(() => {
-        focus();
-    }, [dimensions]);
-
     const onLogin = useCallback(() => {
         Keyboard.dismiss();
         preSignIn();
@@ -360,9 +315,7 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
                 error={error ? ' ' : ''}
                 keyboardType='email-address'
                 label={createLoginPlaceholder()}
-                onBlur={onBlur}
                 onChangeText={onLoginChange}
-                onFocus={onFocus}
                 onSubmitEditing={focusPassword}
                 ref={loginRef}
                 returnKeyType='next'
@@ -382,9 +335,7 @@ const LoginForm = ({config, extra, keyboardAwareRef, numberSSOs, serverDisplayNa
                 error={error}
                 keyboardType='default'
                 label={intl.formatMessage({id: 'login.password', defaultMessage: 'Password'})}
-                onBlur={onBlur}
                 onChangeText={onPasswordChange}
-                onFocus={onFocus}
                 onSubmitEditing={onLogin}
                 ref={passwordRef}
                 returnKeyType='join'
diff --git a/app/screens/login/index.tsx b/app/screens/login/index.tsx
index c40c65af97..d8e644c663 100644
--- a/app/screens/login/index.tsx
+++ b/app/screens/login/index.tsx
@@ -211,7 +211,7 @@ const LoginOptions = ({
                 <KeyboardAwareScrollView
                     bounces={true}
                     contentContainerStyle={[styles.innerContainer, additionalContainerStyle]}
-                    enableAutomaticScroll={Platform.OS === 'android'}
+                    enableAutomaticScroll={true}
                     enableOnAndroid={false}
                     enableResetScrollToCoords={true}
                     extraScrollHeight={0}
@@ -228,11 +228,9 @@ const LoginOptions = ({
                         <Form
                             config={config}
                             extra={extra}
-                            keyboardAwareRef={keyboardAwareRef}
                             license={license}
                             launchError={launchError}
                             launchType={launchType}
-                            numberSSOs={numberSSOs}
                             theme={theme}
                             serverDisplayName={serverDisplayName}
                             serverUrl={serverUrl}