Merge pull request #96751 from software-mansion-labs/@GCyganek/landscape-mode/report-submit-to-popover

Fix Contact list modal broken in landscape mode

Author: stitesExpensify

src/components/EmojiPicker/EmojiPickerMenu/useEmojiPickerMenu.ts

@@ -4,15 +4,16 @@ import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
 import usePreferredEmojiSkinTone from '@hooks/usePreferredEmojiSkinTone';
+import useSafeAreaInsets from '@hooks/useSafeAreaInsets';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 
 import type {EmojiPickerList, EmojiPickerListItem} from '@libs/EmojiUtils';
 import {getHeaderEmojis, getSpacersIndexes, mergeEmojisWithFrequentlyUsedEmojis, processFrequentlyUsedEmojis, suggestEmojis} from '@libs/EmojiUtils';
 import isInLandscapeModeUtil from '@libs/isInLandscapeMode';
 
-import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import calculateModalHeightInLandscapeMode from '@src/utils/calculateModalHeightInLandscapeMode';
 
 import type {FlashListRef} from '@shopify/flash-list';
 
@@ -33,8 +34,9 @@ const useEmojiPickerMenu = () => {
     const [preferredSkinTone] = usePreferredEmojiSkinTone();
     const {windowHeight, windowWidth} = useWindowDimensions();
     const StyleUtils = useStyleUtils();
-    const {keyboardHeight} = useKeyboardState();
+    const {keyboardActiveHeight} = useKeyboardState();
     const isInLandscapeMode = isInLandscapeModeUtil(windowWidth, windowHeight);
+    const {top: topSafeAreaInset} = useSafeAreaInsets();
 
     /**
      * The EmojiPicker sets the `innerContainerStyle` with `maxHeight: '95%'` in `styles.popoverInnerContainer`
@@ -44,7 +46,7 @@ const useEmojiPickerMenu = () => {
      */
     const listStyle = StyleUtils.getEmojiPickerListHeight(
         isListFiltered,
-        windowHeight * (isInLandscapeMode ? CONST.MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE : 0.95) - keyboardHeight,
+        isInLandscapeMode ? calculateModalHeightInLandscapeMode(windowHeight, topSafeAreaInset, keyboardActiveHeight) : (windowHeight - topSafeAreaInset) * 0.95 - keyboardActiveHeight,
     );
 
     useEffect(() => {

src/components/withKeyboardState.tsx

@@ -50,6 +50,8 @@ function KeyboardStateProvider({children}: ChildrenProps): ReactElement | null {
         const keyboardDidHideListener = KeyboardEvents.addListener('keyboardDidHide', () => {
             setKeyboardHeight(0);
             setIsKeyboardActive(false);
+            // Sometimes 'keyboardWillHide' is not called (popover closed when keyboard is open), in this case we don't want stale keyboardActiveHeight value
+            setKeyboardActiveHeight(0);
         });
         const keyboardWillShowListener = KeyboardEvents.addListener('keyboardWillShow', (e) => {
             setIsKeyboardActive(true);

src/hooks/useReportSubmitToPopover.tsx

@@ -9,6 +9,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import {personalDetailsLoginSelector} from '@src/selectors/PersonalDetails';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import calculateModalHeightInLandscapeMode from '@src/utils/calculateModalHeightInLandscapeMode';
 
 import type {RefObject} from 'react';
 
@@ -17,10 +18,12 @@ import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 
 import useIsInLandscapeMode from './useIsInLandscapeMode';
+import useKeyboardState from './useKeyboardState';
 import useOnyx from './useOnyx';
 import usePopoverPosition from './usePopoverPosition';
 import usePrevious from './usePrevious';
 import useResponsiveLayout from './useResponsiveLayout';
+import useSafeAreaInsets from './useSafeAreaInsets';
 import useStyleUtils from './useStyleUtils';
 import useThemeStyles from './useThemeStyles';
 import useViewportOffsetTop from './useViewportOffsetTop';
@@ -60,15 +63,18 @@ function useReportSubmitToPopover({reportID, onSubmitSuccess, anchorAlignment =
     // Bottom-docked Modal path only; aligns with Popover path that omits modal shell padding chrome
     // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
     const {isSmallScreenWidth} = useResponsiveLayout();
-    const isBottomDockedInLandscape = isSmallScreenWidth && isInLandscapeMode;
+    const {keyboardActiveHeight} = useKeyboardState();
+    const {top: topSafeAreaInset} = useSafeAreaInsets();
 
     const submitToPopoverContentHeight = useMemo(() => {
-        if (!isBottomDockedInLandscape) {
+        if (!isInLandscapeMode) {
             return popoverDimensions.height;
         }
 
-        return Math.min(popoverDimensions.height, windowHeight * CONST.MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE);
-    }, [isBottomDockedInLandscape, windowHeight]);
+        const contentHeightLandscapeMode = calculateModalHeightInLandscapeMode(windowHeight, topSafeAreaInset, keyboardActiveHeight);
+
+        return Math.min(popoverDimensions.height, contentHeightLandscapeMode);
+    }, [isInLandscapeMode, windowHeight, keyboardActiveHeight, topSafeAreaInset]);
     const anchorRef = useRef<View>(null);
     const oneShotOnSubmitSuccessRef = useRef<(() => void) | undefined>(undefined);
     const onSubmitWithManagerEmailRef = useRef<ReportSubmitToPopoverOpenOptions['onSubmitWithManagerEmail']>(undefined);
@@ -227,9 +233,9 @@ function useReportSubmitToPopover({reportID, onSubmitSuccess, anchorAlignment =
     const innerContainerStyle = useMemo(
         () => ({
             ...popoverContainerStyle,
-            ...(isBottomDockedInLandscape ? styles.getPopoverMaxHeight(windowHeight, true) : {minHeight: popoverDimensions.minHeight}),
+            ...(isInLandscapeMode ? styles.getPopoverMaxHeight(windowHeight, true) : {minHeight: popoverDimensions.minHeight}),
         }),
-        [popoverContainerStyle, isBottomDockedInLandscape, windowHeight, styles],
+        [popoverContainerStyle, isInLandscapeMode, windowHeight, styles],
     );
 
     const reportSubmitToPopover = useMemo(() => {
@@ -259,7 +265,7 @@ function useReportSubmitToPopover({reportID, onSubmitSuccess, anchorAlignment =
             >
                 <View
                     collapsable={false}
-                    style={[StyleUtils.getHeight(submitToPopoverContentHeight), styles.flexColumn, styles.flex1, styles.w100, styles.pt4]}
+                    style={[StyleUtils.getHeight(submitToPopoverContentHeight), styles.flexColumn, !isInLandscapeMode && styles.flex1, styles.w100, styles.pt4]}
                 >
                     <ReportSubmitToContent
                         key={submitToContentKey}
@@ -276,28 +282,28 @@ function useReportSubmitToPopover({reportID, onSubmitSuccess, anchorAlignment =
             </PopoverWithMeasuredContent>
         );
     }, [
-        StyleUtils,
-        styles.flexColumn,
-        styles.flex1,
-        styles.pt4,
-        styles.w100,
+        shouldRenderSubmitToPopover,
         innerContainerStyle,
         outerStyle,
-        submitToPopoverContentHeight,
-        shouldRenderSubmitToPopover,
         isVisible,
         closeReportSubmitToPopover,
         handleReportSubmitToPopoverModalHide,
         anchorPosition,
         anchorAlignment,
-        anchorRef,
+        StyleUtils,
+        submitToPopoverContentHeight,
+        styles.flexColumn,
+        styles.flex1,
+        styles.w100,
+        styles.pt4,
+        isInLandscapeMode,
+        submitToContentKey,
         report,
         policy,
         isLoadingReportData,
         handleCombinedSubmitSuccess,
         isSearchSubmitFlow,
         handleSearchSubmitWithManagerEmail,
-        submitToContentKey,
     ]);
 
     return {

src/pages/ReportSubmitToContent.tsx

@@ -9,12 +9,12 @@ import Text from '@components/Text';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useIsInLandscapeMode from '@hooks/useIsInLandscapeMode';
+import useKeyboardState from '@hooks/useKeyboardState';
 import {useMemoizedLazyIllustrations} from '@hooks/useLazyAsset';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import usePermissions from '@hooks/usePermissions';
-import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useSearchShouldCalculateTotals from '@hooks/useSearchShouldCalculateTotals';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -79,10 +79,9 @@ function ReportSubmitToContent({
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {translate, localeCompare} = useLocalize();
-    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
-    const {isSmallScreenWidth} = useResponsiveLayout();
     const isInLandscapeMode = useIsInLandscapeMode();
-    const isBottomDockedInLandscape = isSmallScreenWidth && isInLandscapeMode;
+    const {keyboardActiveHeight} = useKeyboardState();
+
     const currentUserDetails = useCurrentUserPersonalDetails();
     const {isBetaEnabled} = usePermissions();
     const [transactionViolations] = useOnyx(ONYXKEYS.COLLECTION.TRANSACTION_VIOLATIONS);
@@ -404,22 +403,22 @@ function ReportSubmitToContent({
 
     const confirmButtonOptions = useMemo(
         () => ({
-            showButton: true,
+            showButton: !keyboardActiveHeight || !isInLandscapeMode,
             text: translate('common.confirm'),
             onConfirm: handleSubmit,
             confirmButtonSize: 'medium' as const,
         }),
-        [handleSubmit, translate],
+        [handleSubmit, translate, keyboardActiveHeight, isInLandscapeMode],
     );
 
     const containerStyle = useMemo(() => {
         const baseStyle = [styles.w100, styles.flex1, styles.pt3, styles.pb3];
-        if (isBottomDockedInLandscape) {
+        if (isInLandscapeMode) {
             return baseStyle;
         }
 
         return [...baseStyle, StyleUtils.getMinimumHeight(CONST.POPOVER_REPORT_SUBMIT_TO_CONTENT_HEIGHT)];
-    }, [StyleUtils, isBottomDockedInLandscape, styles.flex1, styles.pb3, styles.pt3, styles.w100]);
+    }, [StyleUtils, isInLandscapeMode, styles.flex1, styles.pb3, styles.pt3, styles.w100]);
 
     if (shouldShowNotFoundView) {
         return (
@@ -445,7 +444,7 @@ function ReportSubmitToContent({
                 isRowMultilineSupported
                 style={{containerStyle: styles.flex1}}
                 disableMaintainingScrollPosition
-                addBottomSafeAreaPadding
+                addBottomSafeAreaPadding={!isInLandscapeMode}
             >
                 {hasError && (
                     <FormHelpMessage

src/utils/calculateModalHeightInLandscapeMode.ts

@@ -0,0 +1,14 @@
+import CONST from '@src/CONST';
+
+// Calculates the height of a modal in landscape mode based on the window height and keyboard state.
+function calculateModalHeightInLandscapeMode(windowHeight: number, topSafeAreaInset: number, keyboardActiveHeight: number) {
+    const availableWindowHeight = windowHeight - topSafeAreaInset;
+
+    if (keyboardActiveHeight > 0) {
+        return availableWindowHeight - keyboardActiveHeight;
+    }
+
+    return availableWindowHeight * CONST.MODAL_MAX_HEIGHT_TO_WINDOW_HEIGHT_RATIO_LANDSCAPE_MODE;
+}
+
+export default calculateModalHeightInLandscapeMode;