Feature: Make the mentions auto-complete menu scrollable

src/CONST.js

@@ -847,7 +847,11 @@ const CONST = {
         ITEM_HEIGHT: 40,
         SMALL_CONTAINER_HEIGHT_FACTOR: 2.5,
         MIN_AMOUNT_OF_ITEMS: 3,
+        // used for max emoji suggestions and for limiting the height of mention suggestions,
+        // we show a scrollable list with max height equal to MAX_AMOUNT_OF_ITEMS (5) * ITEM_HEIGHT.
         MAX_AMOUNT_OF_ITEMS: 5,
+        // used for max mention suggestions
+        MAX_AMOUNT_OF_MENTIONS: 20,
         HERE_TEXT: '@here',
     },
     COMPOSER_MAX_HEIGHT: 125,

src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.js

@@ -1,4 +1,4 @@
-import React, {useEffect} from 'react';
+import React, {useEffect, useRef} from 'react';
 import Animated, {Easing, FadeOutDown, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 // We take FlatList from this package to properly handle the scrolling of AutoCompleteSuggestions in chats since one scroll is nested inside another
 import {FlatList} from 'react-native-gesture-handler';
@@ -15,6 +15,10 @@ import PressableWithFeedback from '../Pressable/PressableWithFeedback';
  */
 const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
     if (isSuggestionPickerLarge) {
+        if (numRows > CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_ITEMS) {
+            // On large screens, if there are more than 5 suggestions, we display a scrollable window with a height of 5 items, indicating that there are more items available
+            return CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_ITEMS * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
+        }
         return numRows * CONST.AUTO_COMPLETE_SUGGESTER.ITEM_HEIGHT;
     }
     if (numRows > 2) {
@@ -26,6 +30,7 @@ const measureHeightOfSuggestionRows = (numRows, isSuggestionPickerLarge) => {
 
 function BaseAutoCompleteSuggestions(props) {
     const rowHeight = useSharedValue(0);
+    const scrollRef = useRef(null);
     /**
      * Render a suggestion menu item component.
      * @param {Object} params
@@ -56,19 +61,27 @@ function BaseAutoCompleteSuggestions(props) {
         });
     }, [props.suggestions.length, props.isSuggestionPickerLarge, rowHeight]);
 
+    useEffect(() => {
+        if (!scrollRef.current) {
+            return;
+        }
+        scrollRef.current.scrollToIndex({index: props.highlightedSuggestionIndex, animated: true});
+    }, [props.highlightedSuggestionIndex]);
+
     return (
         <Animated.View
             ref={props.forwardedRef}
             style={[styles.autoCompleteSuggestionsContainer, animatedStyles]}
             exiting={FadeOutDown.duration(100).easing(Easing.inOut(Easing.ease))}
         >
             <FlatList
+                ref={scrollRef}
                 keyboardShouldPersistTaps="handled"
                 data={props.suggestions}
                 renderItem={renderSuggestionMenuItem}
                 keyExtractor={props.keyExtractor}
                 removeClippedSubviews={false}
-                showsVerticalScrollIndicator={innerHeight > rowHeight}
+                showsVerticalScrollIndicator={innerHeight > rowHeight.value}
                 style={{flex: 1}}
             />
         </Animated.View>

src/pages/home/report/ReportActionCompose.js

@@ -143,16 +143,17 @@ const {RNTextInputReset} = NativeModules;
  * Return the max available index for arrow manager.
  * @param {Number} numRows
  * @param {Boolean} isAutoSuggestionPickerLarge
+ * @param {Boolean} [isMentionSuggestion]
  * @returns {Number}
  */
-const getMaxArrowIndex = (numRows, isAutoSuggestionPickerLarge) => {
-    // EmojiRowCount is number of emoji suggestions. For small screen we can fit 3 items and for large we show up to 5 items
-    const emojiRowCount = isAutoSuggestionPickerLarge
-        ? Math.min(numRows, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_ITEMS)
-        : Math.min(numRows, CONST.AUTO_COMPLETE_SUGGESTER.MIN_AMOUNT_OF_ITEMS);
+const getMaxArrowIndex = (numRows, isAutoSuggestionPickerLarge, isMentionSuggestion = false) => {
+    // rowCount is number of emoji/mention suggestions. For small screen we can fit 3 items
+    // and for large we show up to 5 items for emojis and 20 items for mentions
+    const MAX_SUGGESTIONS = isMentionSuggestion ? CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_MENTIONS : CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_ITEMS;
+    const rowCount = isAutoSuggestionPickerLarge ? Math.min(numRows, MAX_SUGGESTIONS) : Math.min(numRows, CONST.AUTO_COMPLETE_SUGGESTER.MIN_AMOUNT_OF_ITEMS);
 
     // -1 because we start at 0
-    return emojiRowCount - 1;
+    return rowCount - 1;
 };
 
 class ReportActionCompose extends React.Component {
@@ -463,7 +464,7 @@ class ReportActionCompose extends React.Component {
         });
 
         const sortedPersonalDetails = _.sortBy(filteredPersonalDetails, (detail) => detail.displayName || detail.login);
-        _.each(_.first(sortedPersonalDetails, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_ITEMS - suggestions.length), (detail) => {
+        _.each(_.first(sortedPersonalDetails, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_MENTIONS - suggestions.length), (detail) => {
             suggestions.push({
                 text: detail.displayName,
                 alternateText: detail.login,
@@ -1190,7 +1191,7 @@ class ReportActionCompose extends React.Component {
                 {!_.isEmpty(this.state.suggestedMentions) && this.state.shouldShowMentionSuggestionMenu && (
                     <ArrowKeyFocusManager
                         focusedIndex={this.state.highlightedMentionIndex}
-                        maxIndex={getMaxArrowIndex(this.state.suggestedMentions.length, this.state.isAutoSuggestionPickerLarge)}
+                        maxIndex={getMaxArrowIndex(this.state.suggestedMentions.length, this.state.isAutoSuggestionPickerLarge, true)}
                         shouldExcludeTextAreaNodes={false}
                         onFocusedIndexChanged={(index) => this.setState({highlightedMentionIndex: index})}
                     >