diff --git a/src/components/AutoCompleteSuggestions/getSuggestionsLeftOffset.ts b/src/components/AutoCompleteSuggestions/getSuggestionsLeftOffset.ts new file mode 100644 index 000000000000..c1fab5633844 --- /dev/null +++ b/src/components/AutoCompleteSuggestions/getSuggestionsLeftOffset.ts @@ -0,0 +1,29 @@ +import type {EdgeInsets} from 'react-native-safe-area-context'; + +function getLeftOffset( + x: number, + insets: EdgeInsets, + bigScreenLeftOffset: number, + shouldUseNarrowLayout: boolean, + menuWidth: number, + windowWidth: number, + isInLandscapeMode: boolean, +): number { + if (isInLandscapeMode) { + // On Android devices, sometimes x takes into consideration the insets.left value, sometimes not + // so in case it does we want to subtract it to get the correct left offset. + if (x - insets.left >= 0) { + return x - insets.left; + } + + return x; + } + + if (shouldUseNarrowLayout) { + return x; + } + + return bigScreenLeftOffset; +} + +export default getLeftOffset; diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx index 3d327c87125f..89ffabe87f16 100644 --- a/src/components/AutoCompleteSuggestions/index.tsx +++ b/src/components/AutoCompleteSuggestions/index.tsx @@ -7,6 +7,7 @@ import useWindowDimensionsForAutoCompleteSuggestions from '@hooks/useWindowDimen import {hasHoverSupport} from '@libs/DeviceCapabilities'; import CONST from '@src/CONST'; import AutoCompleteSuggestionsPortal from './AutoCompleteSuggestionsPortal'; +import getLeftOffset from './getSuggestionsLeftOffset'; import type {AutoCompleteSuggestionsProps, MeasureParentContainerAndCursor} from './types'; const measureHeightOfSuggestionRows = (numRows: number, canBeBig: boolean, isInLandscapeMode: boolean): number => { @@ -50,13 +51,6 @@ const initialContainerState = { cursorCoordinates: {x: 0, y: 0}, }; -function getLeftOffset(x: number, leftInset: number, bigScreenLeftOffset: number, shouldUseNarrowLayout: boolean, isInLandscapeMode: boolean): number { - if (shouldUseNarrowLayout) { - return isInLandscapeMode ? x - leftInset : x; - } - return bigScreenLeftOffset; -} - /** * On the mobile-web platform, when long-pressing on auto-complete suggestions, * we need to prevent focus shifting to avoid blurring the main input (which makes the suggestions picker close and fires the onSelect callback). @@ -78,7 +72,6 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu const insets = useSafeAreaInsets(); const {keyboardHeight, isKeyboardAnimatingRef} = useKeyboardState(); const {paddingBottom: bottomInset, paddingTop: topInset} = StyleUtils.getPlatformSafeAreaPadding(insets ?? undefined); - const {left: leftInset} = insets; useEffect(() => { const container = containerRef.current; @@ -136,7 +129,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu topInset, }); - const newLeftOffset = getLeftOffset(x, leftInset, bigScreenLeftOffset, shouldUseNarrowLayout, isInLandscapeMode); + const newLeftOffset = getLeftOffset(x, insets, bigScreenLeftOffset, shouldUseNarrowLayout, width, windowWidth, isInLandscapeMode); // If the suggested word is longer than 150 (approximately half the width of the suggestion popup), then adjust a new position of popup const isAdjustmentNeeded = Math.abs(prevLeftValue.current - bigScreenLeftOffset) > 150; if (isInitialRender.current || isAdjustmentNeeded || prevIsInLandscapeModeValue.current !== isInLandscapeMode) { @@ -179,7 +172,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu topInset, isKeyboardAnimatingRef, isInLandscapeMode, - leftInset, + insets, ]); // Prevent rendering if container dimensions are not set or if we have no suggestions