diff --git a/src/styles/utils/autoCompleteSuggestion/index.android.ts b/src/styles/utils/autoCompleteSuggestion/index.android.ts new file mode 100644 index 000000000000..88b7a7c84297 --- /dev/null +++ b/src/styles/utils/autoCompleteSuggestion/index.android.ts @@ -0,0 +1,5 @@ +import type ShouldPreventScrollOnAutoCompleteSuggestion from './types'; + +const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => false; + +export default shouldPreventScrollOnAutoCompleteSuggestion; diff --git a/src/styles/utils/autoCompleteSuggestion/index.ts b/src/styles/utils/autoCompleteSuggestion/index.ts new file mode 100644 index 000000000000..e756e7178c57 --- /dev/null +++ b/src/styles/utils/autoCompleteSuggestion/index.ts @@ -0,0 +1,5 @@ +import type ShouldPreventScrollOnAutoCompleteSuggestion from './types'; + +const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => true; + +export default shouldPreventScrollOnAutoCompleteSuggestion; diff --git a/src/styles/utils/autoCompleteSuggestion/index.website.ts b/src/styles/utils/autoCompleteSuggestion/index.website.ts new file mode 100644 index 000000000000..badec5dfc774 --- /dev/null +++ b/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; diff --git a/src/styles/utils/autoCompleteSuggestion/types.ts b/src/styles/utils/autoCompleteSuggestion/types.ts new file mode 100644 index 000000000000..563d305eb236 --- /dev/null +++ b/src/styles/utils/autoCompleteSuggestion/types.ts @@ -0,0 +1,3 @@ +type ShouldPreventScrollOnAutoCompleteSuggestion = () => boolean; + +export default ShouldPreventScrollOnAutoCompleteSuggestion; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index a0edb7fd4e23..ed3466dfedf7 100644 --- a/src/styles/utils/index.ts +++ b/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,6 +791,8 @@ function getBaseAutoCompleteSuggestionContainerStyle({left, bottom, width}: GetB }; } +const shouldPreventScroll = shouldPreventScrollOnAutoCompleteSuggestion(); + /** * Gets the correct position for auto complete suggestion container */ @@ -797,13 +800,13 @@ 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, };