fix: move emoji suggestions to portals

src/components/AutoCompleteSuggestions/autoCompleteSuggestionsPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import refPropType from '../refPropTypes';
 
 const propTypes = {
     /** Array of suggestions */
@@ -27,8 +28,17 @@ const propTypes = {
 
     /** create accessibility label for each item */
     accessibilityLabelExtractor: PropTypes.func.isRequired,
+
+    /** Ref of the container enclosing the menu.
+     * This is needed to render the menu in correct position inside a portal
+     */
+    parentContainerRef: refPropType,
 };
 
-const defaultProps = {};
+const defaultProps = {
+    parentContainerRef: {
+        current: null,
+    },
+};
 
 export {propTypes, defaultProps};

src/components/AutoCompleteSuggestions/index.js

@@ -1,7 +1,11 @@
 import React from 'react';
+import {View} from 'react-native';
+import ReactDOM from 'react-dom';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import * as DeviceCapabilities from '../../libs/DeviceCapabilities';
 import {propTypes} from './autoCompleteSuggestionsPropTypes';
+import * as StyleUtils from '../../styles/StyleUtils';
+import useWindowDimensions from '../../hooks/useWindowDimensions';
 
 /**
  * On the mobile-web platform, when long-pressing on auto-complete suggestions,
@@ -10,8 +14,14 @@ import {propTypes} from './autoCompleteSuggestionsPropTypes';
  * On the native platform, tapping on auto-complete suggestions will not blur the main input.
  */
 
-function AutoCompleteSuggestions(props) {
+function AutoCompleteSuggestions({parentContainerRef, ...props}) {
     const containerRef = React.useRef(null);
+    const {windowHeight, windowWidth} = useWindowDimensions();
+    const [{width, left, bottom}, setContainerState] = React.useState({
+        width: 0,
+        left: 0,
+        bottom: 0,
+    });
     React.useEffect(() => {
         const container = containerRef.current;
         if (!container) {
@@ -26,13 +36,26 @@ function AutoCompleteSuggestions(props) {
         return () => (container.onpointerdown = null);
     }, []);
 
-    return (
+    React.useEffect(() => {
+        if (!parentContainerRef || !parentContainerRef.current) {
+            return;
+        }
+        parentContainerRef.current.measureInWindow((x, y, w) => setContainerState({left: x, bottom: windowHeight - y, width: w}));
+    }, [parentContainerRef, windowHeight, windowWidth]);
+
+    const componentToRender = (
         <BaseAutoCompleteSuggestions
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
             ref={containerRef}
         />
     );
+
+    if (!width) {
+        return componentToRender;
+    }
+
+    return ReactDOM.createPortal(<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>, document.querySelector('body'));
 }
 
 AutoCompleteSuggestions.propTypes = propTypes;

src/components/AutoCompleteSuggestions/index.native.js

@@ -2,7 +2,7 @@ import React from 'react';
 import BaseAutoCompleteSuggestions from './BaseAutoCompleteSuggestions';
 import {propTypes} from './autoCompleteSuggestionsPropTypes';
 
-function AutoCompleteSuggestions(props) {
+function AutoCompleteSuggestions({parentContainerRef, ...props}) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <BaseAutoCompleteSuggestions {...props} />;
 }

src/components/EmojiSuggestions.js

@@ -8,6 +8,7 @@ import * as EmojiUtils from '../libs/EmojiUtils';
 import Text from './Text';
 import getStyledTextArray from '../libs/GetStyledTextArray';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
+import refPropType from './refPropTypes';
 
 const propTypes = {
     /** The index of the highlighted emoji */
@@ -45,9 +46,14 @@ const propTypes = {
 
     /** Stores user's preferred skin tone */
     preferredSkinToneIndex: PropTypes.number.isRequired,
+
+    /** Ref of the container enclosing the menu.
+     * This is needed to render the menu in correct position inside a portal
+     */
+    containerRef: refPropType,
 };
 
-const defaultProps = {highlightedEmojiIndex: 0};
+const defaultProps = {highlightedEmojiIndex: 0, containerRef: {current: null}};
 
 /**
  * Create unique keys for each emoji item
@@ -98,6 +104,7 @@ function EmojiSuggestions(props) {
             isSuggestionPickerLarge={props.isEmojiPickerLarge}
             shouldIncludeReportRecipientLocalTimeHeight={props.shouldIncludeReportRecipientLocalTimeHeight}
             accessibilityLabelExtractor={keyExtractor}
+            parentContainerRef={props.containerRef}
         />
     );
 }

src/components/MentionSuggestions.js

@@ -10,6 +10,7 @@ import Avatar from './Avatar';
 import AutoCompleteSuggestions from './AutoCompleteSuggestions';
 import getStyledTextArray from '../libs/GetStyledTextArray';
 import avatarPropTypes from './avatarPropTypes';
+import refPropType from './refPropTypes';
 
 const propTypes = {
     /** The index of the highlighted mention */
@@ -42,10 +43,18 @@ const propTypes = {
 
     /** Show that we should include ReportRecipientLocalTime view height */
     shouldIncludeReportRecipientLocalTimeHeight: PropTypes.bool.isRequired,
+
+    /** Ref of the container enclosing the menu.
+     * This is needed to render the menu in correct position inside a portal
+     */
+    containerRef: refPropType,
 };
 
 const defaultProps = {
     highlightedMentionIndex: 0,
+    containerRef: {
+        current: null,
+    },
 };
 
 /**
@@ -122,6 +131,7 @@ function MentionSuggestions(props) {
             isSuggestionPickerLarge={props.isMentionPickerLarge}
             shouldIncludeReportRecipientLocalTimeHeight={props.shouldIncludeReportRecipientLocalTimeHeight}
             accessibilityLabelExtractor={keyExtractor}
+            parentContainerRef={props.containerRef}
         />
     );
 }

src/pages/home/report/ReportActionCompose.js

@@ -314,6 +314,8 @@ function ReportActionCompose({
 
     const insertedEmojisRef = useRef([]);
 
+    const containerRef = useRef(null);
+
     /**
      * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis
      * API is not called too often.
@@ -1030,7 +1032,10 @@ function ReportActionCompose({
         });
 
     return (
-        <View style={[shouldShowReportRecipientLocalTime && !lodashGet(network, 'isOffline') && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}>
+        <View
+            style={[shouldShowReportRecipientLocalTime && !lodashGet(network, 'isOffline') && styles.chatItemComposeWithFirstRow, isComposerFullSize && styles.chatItemFullComposeRow]}
+            ref={containerRef}
+        >
             <OfflineWithFeedback
                 pendingAction={pendingAction}
                 style={isComposerFullSize ? styles.chatItemFullComposeRow : {}}
@@ -1293,6 +1298,7 @@ function ReportActionCompose({
                     isEmojiPickerLarge={suggestionValues.isAutoSuggestionPickerLarge}
                     composerHeight={composerHeight}
                     shouldIncludeReportRecipientLocalTimeHeight={shouldShowReportRecipientLocalTime}
+                    containerRef={containerRef}
                 />
             )}
             {isMentionSuggestionsMenuVisible && (
@@ -1309,6 +1315,7 @@ function ReportActionCompose({
                     isMentionPickerLarge={suggestionValues.isAutoSuggestionPickerLarge}
                     composerHeight={composerHeight}
                     shouldIncludeReportRecipientLocalTimeHeight={shouldShowReportRecipientLocalTime}
+                    containerRef={containerRef}
                 />
             )}
         </View>

src/styles/StyleUtils.js

@@ -1050,6 +1050,17 @@ function getAutoCompleteSuggestionItemStyle(highlightedEmojiIndex, rowHeight, ho
     ];
 }
 
+/**
+ * Gets the correct position for the base auto complete suggestion container
+ *
+ * @param {Object} parentContainerLayout
+ * @returns {Object}
+ */
+
+function getBaseAutoCompleteSuggestionContainerStyle({left, bottom, width}) {
+    return {position: 'fixed', bottom, left, width};
+}
+
 /**
  * Gets the correct position for auto complete suggestion container
  *
@@ -1351,6 +1362,7 @@ export {
     getReportWelcomeBackgroundImageStyle,
     getReportWelcomeTopMarginStyle,
     getReportWelcomeContainerStyle,
+    getBaseAutoCompleteSuggestionContainerStyle,
     getAutoCompleteSuggestionItemStyle,
     getAutoCompleteSuggestionContainerStyle,
     getColoredBackgroundStyle,