Merge pull request #35319 from MrRefactor/proposal/27866

src/styles/utils/autoCompleteSuggestion/index.android.ts

@@ -0,0 +1,5 @@
+import type ShouldPreventScrollOnAutoCompleteSuggestion from './types';
+
+const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => false;
+
+export default shouldPreventScrollOnAutoCompleteSuggestion;

src/styles/utils/autoCompleteSuggestion/index.ts

@@ -0,0 +1,5 @@
+import type ShouldPreventScrollOnAutoCompleteSuggestion from './types';
+
+const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => true;
+
+export default shouldPreventScrollOnAutoCompleteSuggestion;

src/styles/utils/autoCompleteSuggestion/index.website.ts

@@ -0,0 +1,8 @@
+import * as Browser from '@libs/Browser';
+import type ShouldPreventScrollOnAutoCompleteSuggestion from './types';
+
+const isMobileSafari = Browser.isMobileSafari();
+
+const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => !isMobileSafari;
+
+export default shouldPreventScrollOnAutoCompleteSuggestion;

src/styles/utils/autoCompleteSuggestion/types.ts

@@ -0,0 +1,3 @@
+type ShouldPreventScrollOnAutoCompleteSuggestion = () => boolean;
+
+export default ShouldPreventScrollOnAutoCompleteSuggestion;

src/styles/utils/index.ts

@@ -14,6 +14,7 @@ import CONST from '@src/CONST';
 import type {Transaction} from '@src/types/onyx';
 import {defaultStyles} from '..';
 import type {ThemeStyles} from '..';
+import shouldPreventScrollOnAutoCompleteSuggestion from './autoCompleteSuggestion';
 import getCardStyles from './cardStyles';
 import containerComposeStyles from './containerComposeStyles';
 import FontUtils from './FontUtils';
@@ -790,20 +791,22 @@ function getBaseAutoCompleteSuggestionContainerStyle({left, bottom, width}: GetB
     };
 }
 
+const shouldPreventScroll = shouldPreventScrollOnAutoCompleteSuggestion();
+
 /**
  * Gets the correct position for auto complete suggestion container
  */
 function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle {
     'worklet';
 
     const borderWidth = 2;
-    const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING;
+    const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING + (shouldPreventScroll ? borderWidth : 0);
 
     // The suggester is positioned absolutely within the component that includes the input and RecipientLocalTime view (for non-expanded mode only). To position it correctly,
     // we need to shift it by the suggester's height plus its padding and, if applicable, the height of the RecipientLocalTime view.
     return {
         overflow: 'hidden',
-        top: -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING + borderWidth),
+        top: -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING + (shouldPreventScroll ? 0 : borderWidth)),
         height,
         minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT,
     };