Fix padding for edit composer suggestions

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts

@@ -1,5 +1,5 @@
 function getBottomSuggestionPadding(): number {
-    return 6;
+    return 8;
 }
 
 export default getBottomSuggestionPadding;

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx

@@ -3,13 +3,12 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions';
 import useStyleUtils from '@hooks/useStyleUtils';
-import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 import type {AutoCompleteSuggestionsPortalProps} from './types';
 
 function AutoCompleteSuggestionsPortal<TSuggestion>({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps<TSuggestion>) {
     const StyleUtils = useStyleUtils();
-    const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [StyleUtils, left, width, bottom]);
+    const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom}), [StyleUtils, left, width, bottom]);
 
     if (!width) {
         return null;

src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx

@@ -4,7 +4,6 @@ import ReactDOM from 'react-dom';
 import {View} from 'react-native';
 import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions';
 import useStyleUtils from '@hooks/useStyleUtils';
-import getBottomSuggestionPadding from './getBottomSuggestionPadding';
 import TransparentOverlay from './TransparentOverlay/TransparentOverlay';
 import type {AutoCompleteSuggestionsPortalProps} from './types';
 
@@ -40,7 +39,7 @@ function AutoCompleteSuggestionsPortal<TSuggestion>({
         ReactDOM.createPortal(
             <>
                 <TransparentOverlay onPress={resetSuggestions} />
-                <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding()})}>{componentToRender}</View>
+                <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom})}>{componentToRender}</View>
             </>,
             bodyElement,
         )

src/components/AutoCompleteSuggestions/index.tsx

@@ -7,6 +7,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import CONST from '@src/CONST';
 import AutoCompleteSuggestionsPortal from './AutoCompleteSuggestionsPortal';
+import getBottomSuggestionPadding from './AutoCompleteSuggestionsPortal/getBottomSuggestionPadding';
 import type {AutoCompleteSuggestionsProps, MeasureParentContainerAndCursor} from './types';
 
 const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean): number => {
@@ -89,15 +90,15 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             return;
         }
 
-        measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates}: MeasureParentContainerAndCursor) => {
+        measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates, height}: MeasureParentContainerAndCursor) => {
             const xCoordinatesOfCursor = x + cursorCoordinates.x;
             const bigScreenLeftOffset =
                 xCoordinatesOfCursor + CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH > windowWidth
                     ? windowWidth - CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH
                     : xCoordinatesOfCursor;
             const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
             const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false);
-            let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight;
+            let bottomValue = windowHeight - (y - scrollValue) - keyboardHeight + getBottomSuggestionPadding();
             const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH;
 
             const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({y, cursorCoordinates, scrollValue, contentHeight: contentMaxHeight, topInset});
@@ -123,7 +124,7 @@ function AutoCompleteSuggestions<TSuggestion>({measureParentContainerAndReportCu
             } else {
                 // calculation for big suggestion box below the cursor
                 measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true);
-                bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight;
+                bottomValue = bottomValue - (measuredHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING) - height - 2 * getBottomSuggestionPadding();
             }
             setSuggestionHeight(measuredHeight);
             setContainerState({

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -50,6 +50,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems';
 import ComposerWithSuggestions from './ComposerWithSuggestions';
 import type {ComposerRef, ComposerWithSuggestionsProps} from './ComposerWithSuggestions/ComposerWithSuggestions';
+import RNMeasureContainer from './measureContainer';
 import SendButton from './SendButton';
 
 type SuggestionsRef = {
@@ -209,10 +210,7 @@ function ReportActionCompose({
     const containerRef = useRef<View>(null);
     const measureContainer = useCallback(
         (callback: MeasureInWindowOnSuccessCallback) => {
-            if (!containerRef.current) {
-                return;
-            }
-            containerRef.current.measureInWindow(callback);
+            RNMeasureContainer(containerRef, callback);
         },
         // We added isComposerFullSize in dependencies so that when this value changes, we recalculate the position of the popup
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts

@@ -0,0 +1,13 @@
+import type {RefObject} from 'react';
+import type {MeasureInWindowOnSuccessCallback, View} from 'react-native';
+
+function measureContainer(containerRef: RefObject<View>, callback: MeasureInWindowOnSuccessCallback) {
+    if (!containerRef?.current) {
+        return;
+    }
+    containerRef.current.measure((x, y, width, height, pageX, pageY) => {
+        callback(x + pageX, y + pageY, width, height);
+    });
+}
+
+export default measureContainer;

src/pages/home/report/ReportActionCompose/measureContainer/index.ts

@@ -0,0 +1,11 @@
+import type {RefObject} from 'react';
+import type {MeasureInWindowOnSuccessCallback, View} from 'react-native';
+
+function measureContainer(containerRef: RefObject<View>, callback: MeasureInWindowOnSuccessCallback) {
+    if (!containerRef?.current) {
+        return;
+    }
+    containerRef.current.measureInWindow(callback);
+}
+
+export default measureContainer;

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -47,6 +47,7 @@ import type * as OnyxTypes from '@src/types/onyx';
 import * as ReportActionContextMenu from './ContextMenu/ReportActionContextMenu';
 import getCursorPosition from './ReportActionCompose/getCursorPosition';
 import getScrollPosition from './ReportActionCompose/getScrollPosition';
+import RNMeasureContainer from './ReportActionCompose/measureContainer';
 import type {SuggestionsRef} from './ReportActionCompose/ReportActionCompose';
 import Suggestions from './ReportActionCompose/Suggestions';
 import shouldUseEmojiPickerSelection from './shouldUseEmojiPickerSelection';
@@ -402,10 +403,7 @@ function ReportActionItemMessageEdit(
     );
 
     const measureContainer = useCallback((callback: MeasureInWindowOnSuccessCallback) => {
-        if (!containerRef.current) {
-            return;
-        }
-        containerRef.current.measureInWindow(callback);
+        RNMeasureContainer(containerRef, callback);
     }, []);
 
     const measureParentContainerAndReportCursor = useCallback(