fix: show large suggestion menu only if there is space

src/CONST.ts

@@ -902,6 +902,8 @@ const CONST = {
         HERE_TEXT: '@here',
     },
     COMPOSER_MAX_HEIGHT: 125,
+    CHAT_FOOTER_SECONDARY_ROW_HEIGHT: 15,
+    CHAT_FOOTER_SECONDARY_ROW_PADDING: 5,
     CHAT_FOOTER_MIN_HEIGHT: 65,
     CHAT_SKELETON_VIEW: {
         AVERAGE_ROW_HEIGHT: 80,

src/libs/SuggestionUtils.js

@@ -26,4 +26,22 @@ function trimLeadingSpace(str) {
     return str.slice(0, 1) === ' ' ? str.slice(1) : str;
 }
 
-export {getMaxArrowIndex, trimLeadingSpace};
+/**
+ * Checks if space is available to render large suggestion menu
+ * @param {Number} listHeight
+ * @param {Number} composerHeight
+ * @param {Number} totalSuggestions
+ * @returns {Boolean}
+ */
+function hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, totalSuggestions) {
+    const maxSuggestions = CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_VISIBLE_SUGGESTIONS_IN_CONTAINER;
+    const chatFooterHeight = CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT + 2 * CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING;
+    const availableHeight = listHeight - composerHeight - chatFooterHeight;
+    const menuHeight =
+        (!totalSuggestions || totalSuggestions > maxSuggestions ? maxSuggestions : totalSuggestions) * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT +
+        CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING * 2;
+
+    return availableHeight > menuHeight;
+}
+
+export {getMaxArrowIndex, trimLeadingSpace, hasEnoughSpaceForLargeSuggestionMenu};

src/pages/home/ReportScreen.js

@@ -156,6 +156,7 @@ function ReportScreen({
     const prevReport = usePrevious(report);
     const prevUserLeavingStatus = usePrevious(userLeavingStatus);
     const [isBannerVisible, setIsBannerVisible] = useState(true);
+    const [listHeight, setListHeight] = useState(0);
 
     const reportID = getReportID(route);
     const {addWorkspaceRoomOrChatPendingAction, addWorkspaceRoomOrChatErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
@@ -351,7 +352,8 @@ function ReportScreen({
         }
     }, [report, didSubscribeToReportLeavingEvents, reportID]);
 
-    const onListLayout = useCallback(() => {
+    const onListLayout = useCallback((e) => {
+        setListHeight((prev) => lodashGet(e, 'nativeEvent.layout.height', prev));
         if (!markReadyForHydration) {
             return;
         }
@@ -438,6 +440,7 @@ function ReportScreen({
                                         isComposerFullSize={isComposerFullSize}
                                         onSubmitComment={onSubmitComment}
                                         policies={policies}
+                                        listHeight={listHeight}
                                     />
                                 ) : (
                                     <ReportFooter isReportReadyForDisplay={false} />

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions.js

@@ -22,6 +22,7 @@ import usePrevious from '../../../../hooks/usePrevious';
 import * as EmojiUtils from '../../../../libs/EmojiUtils';
 import * as User from '../../../../libs/actions/User';
 import * as ReportUtils from '../../../../libs/ReportUtils';
+import * as SuggestionUtils from '../../../../libs/SuggestionUtils';
 import * as ReportActionsUtils from '../../../../libs/ReportActionsUtils';
 import canFocusInputOnScreenFocus from '../../../../libs/canFocusInputOnScreenFocus';
 import SilentCommentUpdater from './SilentCommentUpdater';
@@ -93,6 +94,7 @@ function ComposerWithSuggestions({
     handleSendMessage,
     shouldShowComposeInput,
     measureParentContainer,
+    listHeight,
     // Refs
     suggestionsRef,
     animatedRef,
@@ -127,6 +129,11 @@ function ComposerWithSuggestions({
 
     // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
     const isScrollLikelyLayoutTriggered = useRef(false);
+    const suggestions = lodashGet(suggestionsRef, 'current.getSuggestions', () => [])();
+
+    const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, suggestions.length);
+
+    const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion);
 
     /**
      * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
@@ -552,6 +559,7 @@ function ComposerWithSuggestions({
                 composerHeight={composerHeight}
                 onInsertedEmoji={onInsertedEmoji}
                 measureParentContainer={measureParentContainer}
+                isAutoSuggestionPickerLarge={isAutoSuggestionPickerLarge}
                 // Input
                 value={value}
                 setValue={setValue}

src/pages/home/report/ReportActionCompose/ReportActionCompose.js

@@ -61,6 +61,9 @@ const propTypes = {
     /** Whether user interactions should be disabled */
     disabled: PropTypes.bool,
 
+    /** Height of the list which the composer is part of */
+    listHeight: PropTypes.number,
+
     // The NVP describing a user's block status
     blockedFromConcierge: PropTypes.shape({
         // The date that the user will be unblocked
@@ -86,6 +89,7 @@ const defaultProps = {
     isComposerFullSize: false,
     pendingAction: null,
     shouldShowComposeInput: true,
+    listHeight: 0,
     isReportReadyForDisplay: true,
     ...withCurrentUserPersonalDetailsDefaultProps,
 };
@@ -108,6 +112,7 @@ function ReportActionCompose({
     report,
     reportID,
     reportActions,
+    listHeight,
     shouldShowComposeInput,
     isReportReadyForDisplay,
 }) {
@@ -408,6 +413,7 @@ function ReportActionCompose({
                                     onFocus={onFocus}
                                     onBlur={onBlur}
                                     measureParentContainer={measureContainer}
+                                    listHeight={listHeight}
                                 />
                                 <ReportDropUI
                                     onDrop={(e) => {

src/pages/home/report/ReportActionCompose/SuggestionEmoji.js

@@ -205,6 +205,8 @@ function SuggestionEmoji({
         [shouldBlockCalc],
     );
 
+    const getSuggestions = useCallback(() => suggestionValues.suggestedEmojis, [suggestionValues]);
+
     useImperativeHandle(
         forwardedRef,
         () => ({
@@ -213,8 +215,9 @@ function SuggestionEmoji({
             triggerHotkeyActions,
             setShouldBlockSuggestionCalc,
             updateShouldShowSuggestionMenuToFalse,
+            getSuggestions,
         }),
-        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse],
+        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
     if (!isEmojiSuggestionsMenuVisible) {

src/pages/home/report/ReportActionCompose/SuggestionMention.js

@@ -256,15 +256,18 @@ function SuggestionMention({
         setSuggestionValues((prevState) => ({...prevState, suggestedMentions: []}));
     }, []);
 
+    const getSuggestions = useCallback(() => suggestionValues.suggestedMentions, [suggestionValues]);
+
     useImperativeHandle(
         forwardedRef,
         () => ({
             resetSuggestions,
             triggerHotkeyActions,
             setShouldBlockSuggestionCalc,
             updateShouldShowSuggestionMenuToFalse,
+            getSuggestions,
         }),
-        [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse],
+        [resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
     if (!isMentionSuggestionsMenuVisible) {

src/pages/home/report/ReportActionCompose/Suggestions.js

@@ -2,7 +2,6 @@ import React, {useRef, useCallback, useImperativeHandle} from 'react';
 import PropTypes from 'prop-types';
 import SuggestionMention from './SuggestionMention';
 import SuggestionEmoji from './SuggestionEmoji';
-import useWindowDimensions from '../../../../hooks/useWindowDimensions';
 import * as SuggestionProps from './suggestionProps';
 
 const propTypes = {
@@ -15,11 +14,15 @@ const propTypes = {
     /** Function to clear the input */
     resetKeyboardInput: PropTypes.func.isRequired,
 
+    /** Is auto suggestion picker large */
+    isAutoSuggestionPickerLarge: PropTypes.bool,
+
     ...SuggestionProps.baseProps,
 };
 
 const defaultProps = {
     forwardedRef: null,
+    isAutoSuggestionPickerLarge: true,
 };
 
 /**
@@ -40,10 +43,13 @@ function Suggestions({
     onInsertedEmoji,
     resetKeyboardInput,
     measureParentContainer,
+    isAutoSuggestionPickerLarge,
 }) {
     const suggestionEmojiRef = useRef(null);
     const suggestionMentionRef = useRef(null);
 
+    const getSuggestions = useCallback(() => suggestionEmojiRef.current.getSuggestions() || suggestionMentionRef.current.getSuggestions(), []);
+
     /**
      * Clean data related to EmojiSuggestions
      */
@@ -86,16 +92,11 @@ function Suggestions({
             triggerHotkeyActions,
             updateShouldShowSuggestionMenuToFalse,
             setShouldBlockSuggestionCalc,
+            getSuggestions,
         }),
-        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse],
+        [onSelectionChange, resetSuggestions, setShouldBlockSuggestionCalc, triggerHotkeyActions, updateShouldShowSuggestionMenuToFalse, getSuggestions],
     );
 
-    const {windowHeight, isSmallScreenWidth} = useWindowDimensions();
-
-    // the larger composerHeight the less space for EmojiPicker, Pixel 2 has pretty small screen and this value equal 5.3
-    const hasEnoughSpaceForLargeSuggestion = windowHeight / composerHeight >= 6.8;
-    const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion);
-
     const baseProps = {
         value,
         setValue,

src/pages/home/report/ReportFooter.js

@@ -38,6 +38,9 @@ const propTypes = {
     /** Whether user interactions should be disabled */
     shouldDisableCompose: PropTypes.bool,
 
+    /** Height of the list which the composer is part of */
+    listHeight: PropTypes.number,
+
     /** Whetjer the report is ready for display */
     isReportReadyForDisplay: PropTypes.bool,
 
@@ -51,6 +54,7 @@ const defaultProps = {
     pendingAction: null,
     shouldShowComposeInput: true,
     shouldDisableCompose: false,
+    listHeight: 0,
     isReportReadyForDisplay: true,
 };
 
@@ -90,6 +94,7 @@ function ReportFooter(props) {
                             pendingAction={props.pendingAction}
                             isComposerFullSize={props.isComposerFullSize}
                             disabled={props.shouldDisableCompose}
+                            listHeight={props.listHeight}
                             isReportReadyForDisplay={props.isReportReadyForDisplay}
                         />
                     </SwipeableView>

src/styles/styles.js

@@ -817,9 +817,9 @@ const styles = (theme) => ({
     },
 
     chatItemComposeSecondaryRow: {
-        height: 15,
-        marginBottom: 5,
-        marginTop: 5,
+        height: CONST.CHAT_FOOTER_SECONDARY_ROW_HEIGHT,
+        marginBottom: CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING,
+        marginTop: CONST.CHAT_FOOTER_SECONDARY_ROW_PADDING,
     },
 
     chatItemComposeSecondaryRowSubText: {