diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts deleted file mode 100644 index 5bb671c5edac..000000000000 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts +++ /dev/null @@ -1,5 +0,0 @@ -function getBottomSuggestionPadding(): number { - return 16; -} - -export default getBottomSuggestionPadding; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts index acdc643b6b70..778262354973 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ts @@ -1,5 +1,5 @@ function getBottomSuggestionPadding(): number { - return 6; + return 8; } export default getBottomSuggestionPadding; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx index d4f6f0eb28d4..394a7c3cd2eb 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx +++ b/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({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps) { 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; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx index 4d322fe15c4e..27db5abed274 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx +++ b/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({ ReactDOM.createPortal( <> - {componentToRender} + {componentToRender} , bodyElement, ) diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx index 3d1b91dce4b5..70e943e16106 100644 --- a/src/components/AutoCompleteSuggestions/index.tsx +++ b/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,7 +90,7 @@ function AutoCompleteSuggestions({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 @@ -97,7 +98,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu : 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({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({ diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index bbfb47ad8e1f..928c4ac61661 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/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(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 diff --git a/src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts b/src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts new file mode 100644 index 000000000000..48b85169eb49 --- /dev/null +++ b/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, 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; diff --git a/src/pages/home/report/ReportActionCompose/measureContainer/index.ts b/src/pages/home/report/ReportActionCompose/measureContainer/index.ts new file mode 100644 index 000000000000..69dc8ec542c1 --- /dev/null +++ b/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, callback: MeasureInWindowOnSuccessCallback) { + if (!containerRef?.current) { + return; + } + containerRef.current.measureInWindow(callback); +} + +export default measureContainer; diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index d1eb78bcc00e..6ddc479dd270 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/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(