diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts new file mode 100644 index 000000000000..5bb671c5edac --- /dev/null +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/getBottomSuggestionPadding/index.ios.ts @@ -0,0 +1,5 @@ +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 778262354973..acdc643b6b70 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 8; + return 6; } export default getBottomSuggestionPadding; diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx index 394a7c3cd2eb..d4f6f0eb28d4 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx @@ -3,12 +3,13 @@ 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}), [StyleUtils, left, width, bottom]); + const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [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 27db5abed274..4d322fe15c4e 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx @@ -4,6 +4,7 @@ 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'; @@ -39,7 +40,7 @@ function AutoCompleteSuggestionsPortal({ ReactDOM.createPortal( <> - {componentToRender} + {componentToRender} , bodyElement, ) diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx index 70e943e16106..3d1b91dce4b5 100644 --- a/src/components/AutoCompleteSuggestions/index.tsx +++ b/src/components/AutoCompleteSuggestions/index.tsx @@ -7,7 +7,6 @@ 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 => { @@ -90,7 +89,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu return; } - measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates, height}: MeasureParentContainerAndCursor) => { + measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates}: MeasureParentContainerAndCursor) => { const xCoordinatesOfCursor = x + cursorCoordinates.x; const bigScreenLeftOffset = xCoordinatesOfCursor + CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH > windowWidth @@ -98,7 +97,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu : xCoordinatesOfCursor; const contentMaxHeight = measureHeightOfSuggestionRows(suggestionsLength, true); const contentMinHeight = measureHeightOfSuggestionRows(suggestionsLength, false); - let bottomValue = windowHeight - (y - scrollValue) - keyboardHeight + getBottomSuggestionPadding(); + let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight; const widthValue = shouldUseNarrowLayout ? width : CONST.AUTO_COMPLETE_SUGGESTER.BIG_SCREEN_SUGGESTION_WIDTH; const isEnoughSpaceToRenderMenuAboveForBig = isEnoughSpaceToRenderMenuAboveCursor({y, cursorCoordinates, scrollValue, contentHeight: contentMaxHeight, topInset}); @@ -124,7 +123,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu } else { // calculation for big suggestion box below the cursor measuredHeight = measureHeightOfSuggestionRows(suggestionsLength, true); - bottomValue = bottomValue - (measuredHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING) - height - 2 * getBottomSuggestionPadding(); + bottomValue = windowHeight - y - cursorCoordinates.y + scrollValue - measuredHeight - CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT - keyboardHeight; } setSuggestionHeight(measuredHeight); setContainerState({ diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx index 373b954164ec..af766f7b9357 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx @@ -51,7 +51,6 @@ 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 = { @@ -212,7 +211,10 @@ function ReportActionCompose({ const containerRef = useRef(null); const measureContainer = useCallback( (callback: MeasureInWindowOnSuccessCallback) => { - RNMeasureContainer(containerRef, callback); + if (!containerRef.current) { + return; + } + containerRef.current.measureInWindow(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 deleted file mode 100644 index 48b85169eb49..000000000000 --- a/src/pages/home/report/ReportActionCompose/measureContainer/index.native.ts +++ /dev/null @@ -1,13 +0,0 @@ -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 deleted file mode 100644 index 69dc8ec542c1..000000000000 --- a/src/pages/home/report/ReportActionCompose/measureContainer/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -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 6ddc479dd270..d1eb78bcc00e 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -47,7 +47,6 @@ 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'; @@ -403,7 +402,10 @@ function ReportActionItemMessageEdit( ); const measureContainer = useCallback((callback: MeasureInWindowOnSuccessCallback) => { - RNMeasureContainer(containerRef, callback); + if (!containerRef.current) { + return; + } + containerRef.current.measureInWindow(callback); }, []); const measureParentContainerAndReportCursor = useCallback(