From 16bd5cdba5e545a808601004be02b71cb7c94104 Mon Sep 17 00:00:00 2001 From: MrRefactor Date: Mon, 29 Jan 2024 16:40:22 +0100 Subject: [PATCH 1/5] Fix always scrollable suggestion list --- .../BaseAutoCompleteSuggestions.tsx | 7 ++++++- src/styles/utils/index.ts | 16 +++++++++++++--- 2 files changed, 19 insertions(+), 4 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 5da9c6981603..72ef6ef2f061 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -10,6 +10,8 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as Browser from '@libs/Browser'; +import getPlatform from '@libs/getPlatform'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import viewForwardedRef from '@src/types/utils/viewForwardedRef'; @@ -47,6 +49,9 @@ function BaseAutoCompleteSuggestions( const StyleUtils = useStyleUtils(); const rowHeight = useSharedValue(0); const scrollRef = useRef>(null); + const platform = getPlatform(); + const isMobileSafari = Browser.isMobileSafari(); + /** * Render a suggestion menu item component. */ @@ -67,7 +72,7 @@ function BaseAutoCompleteSuggestions( ); const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length; - const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value)); + const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value, platform, isMobileSafari)); const estimatedListSize = useMemo( () => ({ height: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length, diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8b040dd8d72c..30b1245ebb5a 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -4,6 +4,7 @@ import type {OnyxEntry} from 'react-native-onyx'; import type {EdgeInsets} from 'react-native-safe-area-context'; import type {ValueOf} from 'type-fest'; import * as Browser from '@libs/Browser'; +import type Platform from '@libs/getPlatform/types'; import * as UserUtils from '@libs/UserUtils'; // eslint-disable-next-line no-restricted-imports import {defaultTheme} from '@styles/theme'; @@ -792,17 +793,26 @@ function getBaseAutoCompleteSuggestionContainerStyle({left, bottom, width}: GetB /** * Gets the correct position for auto complete suggestion container */ -function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { +function getAutoCompleteSuggestionContainerStyle(itemsHeight: number, platform: Platform, isMobileSafari: boolean): ViewStyle { 'worklet'; + // This if condition is reverting the workaround for broken scroll on all platforms but native android and iOS safari, where the issue with + // scrolling char behind suggestion list is occuring. Rewerting the fix resolves the issue with always scrollable list on other platforms. const borderWidth = 2; - const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; + let height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; + let top = -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING); + + if (platform === 'android' || isMobileSafari) { + top += borderWidth; + } else { + height += borderWidth; + } // 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, minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, }; From 439336be9c66e437c05100e9db8360313af12742 Mon Sep 17 00:00:00 2001 From: MrRefactor Date: Tue, 13 Feb 2024 12:09:27 +0100 Subject: [PATCH 2/5] Split autoCompleteSuggestionContainerStyle to platform files --- .../BaseAutoCompleteSuggestions.tsx | 6 +--- .../autoCompleteSuggestion/index.android.ts | 20 +++++++++++++ .../utils/autoCompleteSuggestion/index.ts | 20 +++++++++++++ .../autoCompleteSuggestion/index.website.ts | 30 +++++++++++++++++++ src/styles/utils/index.ts | 29 +----------------- 5 files changed, 72 insertions(+), 33 deletions(-) create mode 100644 src/styles/utils/autoCompleteSuggestion/index.android.ts create mode 100644 src/styles/utils/autoCompleteSuggestion/index.ts create mode 100644 src/styles/utils/autoCompleteSuggestion/index.website.ts diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index 72ef6ef2f061..fcc14c922a82 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -10,8 +10,6 @@ import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import * as Browser from '@libs/Browser'; -import getPlatform from '@libs/getPlatform'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import viewForwardedRef from '@src/types/utils/viewForwardedRef'; @@ -49,8 +47,6 @@ function BaseAutoCompleteSuggestions( const StyleUtils = useStyleUtils(); const rowHeight = useSharedValue(0); const scrollRef = useRef>(null); - const platform = getPlatform(); - const isMobileSafari = Browser.isMobileSafari(); /** * Render a suggestion menu item component. @@ -72,7 +68,7 @@ function BaseAutoCompleteSuggestions( ); const innerHeight = CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length; - const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value, platform, isMobileSafari)); + const animatedStyles = useAnimatedStyle(() => StyleUtils.getAutoCompleteSuggestionContainerStyle(rowHeight.value)); const estimatedListSize = useMemo( () => ({ height: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT * suggestions.length, diff --git a/src/styles/utils/autoCompleteSuggestion/index.android.ts b/src/styles/utils/autoCompleteSuggestion/index.android.ts new file mode 100644 index 000000000000..09536b29f485 --- /dev/null +++ b/src/styles/utils/autoCompleteSuggestion/index.android.ts @@ -0,0 +1,20 @@ +import type {ViewStyle} from 'react-native'; +import CONST from '@src/CONST'; + +function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { + 'worklet'; + + const borderWidth = 2; + const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; + + // 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, + height, + minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, + }; +} + +export default getAutoCompleteSuggestionContainerStyle \ No newline at end of file diff --git a/src/styles/utils/autoCompleteSuggestion/index.ts b/src/styles/utils/autoCompleteSuggestion/index.ts new file mode 100644 index 000000000000..b8c92d2b2517 --- /dev/null +++ b/src/styles/utils/autoCompleteSuggestion/index.ts @@ -0,0 +1,20 @@ +import type {ViewStyle} from 'react-native'; +import CONST from '@src/CONST'; + +function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { + 'worklet'; + + const borderWidth = 2; + const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING + borderWidth; + + // 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), + height, + minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, + }; +} + +export default getAutoCompleteSuggestionContainerStyle \ No newline at end of file diff --git a/src/styles/utils/autoCompleteSuggestion/index.website.ts b/src/styles/utils/autoCompleteSuggestion/index.website.ts new file mode 100644 index 000000000000..cf48c040dad2 --- /dev/null +++ b/src/styles/utils/autoCompleteSuggestion/index.website.ts @@ -0,0 +1,30 @@ +import type {ViewStyle} from 'react-native'; +import CONST from '@src/CONST'; +import * as Browser from '@libs/Browser'; + +const isMobileSafari = Browser.isMobileSafari(); + +function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { + 'worklet'; + + const borderWidth = 2; + let height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; + let top = -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING); + + if ( isMobileSafari) { + top += borderWidth; + } else { + height += borderWidth; + } + + // 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, + minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, + }; +} + +export default getAutoCompleteSuggestionContainerStyle \ No newline at end of file diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 30b1245ebb5a..8f3849d0afcd 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -4,7 +4,6 @@ import type {OnyxEntry} from 'react-native-onyx'; import type {EdgeInsets} from 'react-native-safe-area-context'; import type {ValueOf} from 'type-fest'; import * as Browser from '@libs/Browser'; -import type Platform from '@libs/getPlatform/types'; import * as UserUtils from '@libs/UserUtils'; // eslint-disable-next-line no-restricted-imports import {defaultTheme} from '@styles/theme'; @@ -15,6 +14,7 @@ import CONST from '@src/CONST'; import type {Transaction} from '@src/types/onyx'; import {defaultStyles} from '..'; import type {ThemeStyles} from '..'; +import getAutoCompleteSuggestionContainerStyle from './autoCompleteSuggestion'; import getCardStyles from './cardStyles'; import containerComposeStyles from './containerComposeStyles'; import FontUtils from './FontUtils'; @@ -790,33 +790,6 @@ function getBaseAutoCompleteSuggestionContainerStyle({left, bottom, width}: GetB }; } -/** - * Gets the correct position for auto complete suggestion container - */ -function getAutoCompleteSuggestionContainerStyle(itemsHeight: number, platform: Platform, isMobileSafari: boolean): ViewStyle { - 'worklet'; - - // This if condition is reverting the workaround for broken scroll on all platforms but native android and iOS safari, where the issue with - // scrolling char behind suggestion list is occuring. Rewerting the fix resolves the issue with always scrollable list on other platforms. - const borderWidth = 2; - let height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; - let top = -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING); - - if (platform === 'android' || isMobileSafari) { - top += borderWidth; - } else { - height += borderWidth; - } - - // 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, - minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, - }; -} function getEmojiReactionBubbleTextStyle(isContextMenu = false): TextStyle { if (isContextMenu) { From b90c64cf3f018b13b7ec282ae76c18fdc0caef4a Mon Sep 17 00:00:00 2001 From: MrRefactor Date: Tue, 13 Feb 2024 12:29:47 +0100 Subject: [PATCH 3/5] Prettier fixes --- src/styles/utils/autoCompleteSuggestion/index.android.ts | 2 +- src/styles/utils/autoCompleteSuggestion/index.ts | 2 +- src/styles/utils/autoCompleteSuggestion/index.website.ts | 6 +++--- src/styles/utils/index.ts | 1 - 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/styles/utils/autoCompleteSuggestion/index.android.ts b/src/styles/utils/autoCompleteSuggestion/index.android.ts index 09536b29f485..20ce5e4819f2 100644 --- a/src/styles/utils/autoCompleteSuggestion/index.android.ts +++ b/src/styles/utils/autoCompleteSuggestion/index.android.ts @@ -17,4 +17,4 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle }; } -export default getAutoCompleteSuggestionContainerStyle \ No newline at end of file +export default getAutoCompleteSuggestionContainerStyle; diff --git a/src/styles/utils/autoCompleteSuggestion/index.ts b/src/styles/utils/autoCompleteSuggestion/index.ts index b8c92d2b2517..edfdbf55e185 100644 --- a/src/styles/utils/autoCompleteSuggestion/index.ts +++ b/src/styles/utils/autoCompleteSuggestion/index.ts @@ -17,4 +17,4 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle }; } -export default getAutoCompleteSuggestionContainerStyle \ No newline at end of file +export default getAutoCompleteSuggestionContainerStyle; diff --git a/src/styles/utils/autoCompleteSuggestion/index.website.ts b/src/styles/utils/autoCompleteSuggestion/index.website.ts index cf48c040dad2..ddfcbb600e3d 100644 --- a/src/styles/utils/autoCompleteSuggestion/index.website.ts +++ b/src/styles/utils/autoCompleteSuggestion/index.website.ts @@ -1,6 +1,6 @@ import type {ViewStyle} from 'react-native'; -import CONST from '@src/CONST'; import * as Browser from '@libs/Browser'; +import CONST from '@src/CONST'; const isMobileSafari = Browser.isMobileSafari(); @@ -11,7 +11,7 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle let height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; let top = -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING); - if ( isMobileSafari) { + if (isMobileSafari) { top += borderWidth; } else { height += borderWidth; @@ -27,4 +27,4 @@ function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle }; } -export default getAutoCompleteSuggestionContainerStyle \ No newline at end of file +export default getAutoCompleteSuggestionContainerStyle; diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts index 8f3849d0afcd..91e1a0c2235f 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -790,7 +790,6 @@ function getBaseAutoCompleteSuggestionContainerStyle({left, bottom, width}: GetB }; } - function getEmojiReactionBubbleTextStyle(isContextMenu = false): TextStyle { if (isContextMenu) { return { From 972084ded272602bca2c4da8350e4a522702957d Mon Sep 17 00:00:00 2001 From: MrRefactor Date: Wed, 21 Feb 2024 15:25:55 +0100 Subject: [PATCH 4/5] Implement shouldPreventScrollOnAutoCompleteSuggestion function --- .../autoCompleteSuggestion/index.android.ts | 21 ++------------ .../utils/autoCompleteSuggestion/index.ts | 21 ++------------ .../autoCompleteSuggestion/index.website.ts | 28 ++----------------- .../utils/autoCompleteSuggestion/types.ts | 3 ++ src/styles/utils/index.ts | 23 ++++++++++++++- 5 files changed, 34 insertions(+), 62 deletions(-) create mode 100644 src/styles/utils/autoCompleteSuggestion/types.ts diff --git a/src/styles/utils/autoCompleteSuggestion/index.android.ts b/src/styles/utils/autoCompleteSuggestion/index.android.ts index 20ce5e4819f2..88b7a7c84297 100644 --- a/src/styles/utils/autoCompleteSuggestion/index.android.ts +++ b/src/styles/utils/autoCompleteSuggestion/index.android.ts @@ -1,20 +1,5 @@ -import type {ViewStyle} from 'react-native'; -import CONST from '@src/CONST'; +import type ShouldPreventScrollOnAutoCompleteSuggestion from './types'; -function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { - 'worklet'; +const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => false; - const borderWidth = 2; - const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; - - // 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, - height, - minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, - }; -} - -export default getAutoCompleteSuggestionContainerStyle; +export default shouldPreventScrollOnAutoCompleteSuggestion; diff --git a/src/styles/utils/autoCompleteSuggestion/index.ts b/src/styles/utils/autoCompleteSuggestion/index.ts index edfdbf55e185..e756e7178c57 100644 --- a/src/styles/utils/autoCompleteSuggestion/index.ts +++ b/src/styles/utils/autoCompleteSuggestion/index.ts @@ -1,20 +1,5 @@ -import type {ViewStyle} from 'react-native'; -import CONST from '@src/CONST'; +import type ShouldPreventScrollOnAutoCompleteSuggestion from './types'; -function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { - 'worklet'; +const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => true; - const borderWidth = 2; - const height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING + borderWidth; - - // 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), - height, - minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, - }; -} - -export default getAutoCompleteSuggestionContainerStyle; +export default shouldPreventScrollOnAutoCompleteSuggestion; diff --git a/src/styles/utils/autoCompleteSuggestion/index.website.ts b/src/styles/utils/autoCompleteSuggestion/index.website.ts index ddfcbb600e3d..badec5dfc774 100644 --- a/src/styles/utils/autoCompleteSuggestion/index.website.ts +++ b/src/styles/utils/autoCompleteSuggestion/index.website.ts @@ -1,30 +1,8 @@ -import type {ViewStyle} from 'react-native'; import * as Browser from '@libs/Browser'; -import CONST from '@src/CONST'; +import type ShouldPreventScrollOnAutoCompleteSuggestion from './types'; const isMobileSafari = Browser.isMobileSafari(); -function getAutoCompleteSuggestionContainerStyle(itemsHeight: number): ViewStyle { - 'worklet'; +const shouldPreventScrollOnAutoCompleteSuggestion: ShouldPreventScrollOnAutoCompleteSuggestion = () => !isMobileSafari; - const borderWidth = 2; - let height = itemsHeight + 2 * CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_INNER_PADDING; - let top = -(height + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTER_PADDING); - - if (isMobileSafari) { - top += borderWidth; - } else { - height += borderWidth; - } - - // 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, - minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, - }; -} - -export default getAutoCompleteSuggestionContainerStyle; +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 91e1a0c2235f..f713095d639f 100644 --- a/src/styles/utils/index.ts +++ b/src/styles/utils/index.ts @@ -14,7 +14,7 @@ import CONST from '@src/CONST'; import type {Transaction} from '@src/types/onyx'; import {defaultStyles} from '..'; import type {ThemeStyles} from '..'; -import getAutoCompleteSuggestionContainerStyle from './autoCompleteSuggestion'; +import shouldPreventScrollOnAutoCompleteSuggestion from './autoCompleteSuggestion'; import getCardStyles from './cardStyles'; import containerComposeStyles from './containerComposeStyles'; import FontUtils from './FontUtils'; @@ -790,6 +790,27 @@ 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 + (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 + (shouldPreventScroll ? 0 : borderWidth)), + height, + minHeight: CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_ROW_HEIGHT, + }; +} + function getEmojiReactionBubbleTextStyle(isContextMenu = false): TextStyle { if (isContextMenu) { return { From 9610f7c2a97ca43114fc7503df8061f2c0cab8c0 Mon Sep 17 00:00:00 2001 From: MrRefactor Date: Wed, 21 Feb 2024 18:57:51 +0100 Subject: [PATCH 5/5] Prettier fix --- .../AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx index fcc14c922a82..5da9c6981603 100644 --- a/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx +++ b/src/components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions.tsx @@ -47,7 +47,6 @@ function BaseAutoCompleteSuggestions( const StyleUtils = useStyleUtils(); const rowHeight = useSharedValue(0); const scrollRef = useRef>(null); - /** * Render a suggestion menu item component. */