Merge pull request #51318 from truph01/fix/50663

fix: Submit button hang in middle page

src/components/MoneyRequestConfirmationList.tsx

@@ -1,6 +1,6 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import lodashIsEqual from 'lodash/isEqual';
-import React, {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import React, {memo, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {InteractionManager, View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
@@ -46,6 +46,7 @@ import type {SectionListDataType} from './SelectionList/types';
 import UserListItem from './SelectionList/UserListItem';
 import SettlementButton from './SettlementButton';
 import Text from './Text';
+import {KeyboardStateContext} from './withKeyboardState';
 
 type MoneyRequestConfirmationListProps = {
     /** Callback to inform parent modal of success */
@@ -194,7 +195,7 @@ function MoneyRequestConfirmationList({
     const styles = useThemeStyles();
     const {translate, toLocaleDigit} = useLocalize();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
-
+    const {isKeyboardShown, isWindowHeightReducedByKeyboard} = useContext(KeyboardStateContext);
     const isTypeRequest = iouType === CONST.IOU.TYPE.SUBMIT;
     const isTypeSplit = iouType === CONST.IOU.TYPE.SPLIT;
     const isTypeSend = iouType === CONST.IOU.TYPE.PAY;
@@ -824,7 +825,7 @@ function MoneyRequestConfirmationList({
     }, [routeError, isTypeSplit, shouldShowReadOnlySplits, debouncedFormError, formError, translate]);
 
     const footerContent = useMemo(() => {
-        if (isReadOnly) {
+        if (isReadOnly || isKeyboardShown || isWindowHeightReducedByKeyboard) {
             return;
         }
 
@@ -876,7 +877,20 @@ function MoneyRequestConfirmationList({
                 {button}
             </>
         );
-    }, [isReadOnly, iouType, confirm, bankAccountRoute, iouCurrencyCode, policyID, splitOrRequestOptions, styles.ph1, styles.mb2, errorMessage]);
+    }, [
+        isReadOnly,
+        iouType,
+        confirm,
+        bankAccountRoute,
+        iouCurrencyCode,
+        policyID,
+        splitOrRequestOptions,
+        styles.ph1,
+        styles.mb2,
+        errorMessage,
+        isKeyboardShown,
+        isWindowHeightReducedByKeyboard,
+    ]);
 
     const listFooterContent = (
         <MoneyRequestConfirmationListFooter

src/components/withKeyboardState.tsx

@@ -1,6 +1,7 @@
 import type {ComponentType, ForwardedRef, ReactElement, RefAttributes} from 'react';
 import React, {createContext, forwardRef, useEffect, useMemo, useState} from 'react';
 import {Keyboard} from 'react-native';
+import useIsWindowHeightReducedByKeyboard from '@hooks/useIsWindowHeightReducedByKeyboard';
 import getComponentDisplayName from '@libs/getComponentDisplayName';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
@@ -10,6 +11,9 @@ type KeyboardStateContextValue = {
 
     /** Height of the keyboard in pixels */
     keyboardHeight: number;
+
+    /** Whether window height is smaller than usual due to the keyboard being open */
+    isWindowHeightReducedByKeyboard?: boolean;
 };
 
 const KeyboardStateContext = createContext<KeyboardStateContextValue>({
@@ -19,6 +23,7 @@ const KeyboardStateContext = createContext<KeyboardStateContextValue>({
 
 function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
     const [keyboardHeight, setKeyboardHeight] = useState(0);
+    const isWindowHeightReducedByKeyboard = useIsWindowHeightReducedByKeyboard();
 
     useEffect(() => {
         const keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
@@ -38,8 +43,9 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
         () => ({
             keyboardHeight,
             isKeyboardShown: keyboardHeight !== 0,
+            isWindowHeightReducedByKeyboard,
         }),
-        [keyboardHeight],
+        [keyboardHeight, isWindowHeightReducedByKeyboard],
     );
     return <KeyboardStateContext.Provider value={contextValue}>{children}</KeyboardStateContext.Provider>;
 }

src/hooks/useIsWindowHeightReducedByKeyboard/index.ts

@@ -0,0 +1,37 @@
+import {useCallback, useEffect, useState} from 'react';
+import usePrevious from '@hooks/usePrevious';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+
+const useIsWindowHeightReducedByKeyboard = () => {
+    const [isWindowHeightReducedByKeyboard, setIsWindowHeightReducedByKeyboard] = useState(false);
+    const {windowHeight} = useWindowDimensions();
+    const prevWindowHeight = usePrevious(windowHeight);
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
+    const toggleKeyboardOnSmallScreens = useCallback(
+        (isKBOpen: boolean) => {
+            if (!shouldUseNarrowLayout) {
+                return;
+            }
+            setIsWindowHeightReducedByKeyboard(isKBOpen);
+        },
+        [shouldUseNarrowLayout],
+    );
+    useEffect(() => {
+        // Use window height changes to toggle the keyboard. To maintain keyboard state
+        // on all platforms we also use focus/blur events. So we need to make sure here
+        // that we avoid redundant keyboard toggling.
+        // Minus 100px is needed to make sure that when the internet connection is
+        // disabled in android chrome and a small 'No internet connection' text box appears,
+        // we do not take it as a sign to open the keyboard
+        if (!isWindowHeightReducedByKeyboard && windowHeight < prevWindowHeight - 100) {
+            toggleKeyboardOnSmallScreens(true);
+        } else if (isWindowHeightReducedByKeyboard && windowHeight > prevWindowHeight) {
+            toggleKeyboardOnSmallScreens(false);
+        }
+    }, [isWindowHeightReducedByKeyboard, prevWindowHeight, toggleKeyboardOnSmallScreens, windowHeight]);
+
+    return isWindowHeightReducedByKeyboard;
+};
+
+export default useIsWindowHeightReducedByKeyboard;