From 2ea8354452ee4a922213afead5deb44221ca2a96 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 9 Jul 2024 14:20:55 +0200 Subject: [PATCH 01/13] reset suggestions --- src/components/AutoCompleteSuggestions/types.ts | 3 +++ src/components/EmojiSuggestions.tsx | 5 +++++ src/components/MentionSuggestions.tsx | 14 +++++++++++++- .../report/ReportActionCompose/SuggestionEmoji.tsx | 1 + .../ReportActionCompose/SuggestionMention.tsx | 1 + 5 files changed, 23 insertions(+), 1 deletion(-) diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts index 48bb6b713032..b60407e70beb 100644 --- a/src/components/AutoCompleteSuggestions/types.ts +++ b/src/components/AutoCompleteSuggestions/types.ts @@ -42,6 +42,9 @@ type AutoCompleteSuggestionsProps = { /** Measures the parent container's position and dimensions. Also add a cursor coordinates */ measureParentContainerAndReportCursor?: (props: MeasureParentContainerAndCursorCallback) => void; + + /** Reset the emoji suggestions */ + resetSuggestions: () => void; }; export type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps, MeasureParentContainerAndCursorCallback, MeasureParentContainerAndCursor}; diff --git a/src/components/EmojiSuggestions.tsx b/src/components/EmojiSuggestions.tsx index 3781507b544c..a2996482be6a 100644 --- a/src/components/EmojiSuggestions.tsx +++ b/src/components/EmojiSuggestions.tsx @@ -34,6 +34,9 @@ type EmojiSuggestionsProps = { /** Measures the parent container's position and dimensions. Also add cursor coordinates */ measureParentContainerAndReportCursor: (callback: MeasureParentContainerAndCursorCallback) => void; + + /** Reset the emoji suggestions */ + resetSuggestions: () => void; }; /** @@ -49,6 +52,7 @@ function EmojiSuggestions({ preferredSkinToneIndex, highlightedEmojiIndex = 0, measureParentContainerAndReportCursor = () => {}, + resetSuggestions, }: EmojiSuggestionsProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -93,6 +97,7 @@ function EmojiSuggestions({ isSuggestionPickerLarge={isEmojiPickerLarge} accessibilityLabelExtractor={keyExtractor} measureParentContainerAndReportCursor={measureParentContainerAndReportCursor} + resetSuggestions={resetSuggestions} /> ); } diff --git a/src/components/MentionSuggestions.tsx b/src/components/MentionSuggestions.tsx index 1142a90c87d1..bdc19316d491 100644 --- a/src/components/MentionSuggestions.tsx +++ b/src/components/MentionSuggestions.tsx @@ -55,6 +55,9 @@ type MentionSuggestionsProps = { /** Measures the parent container's position and dimensions. Also add cursor coordinates */ measureParentContainerAndReportCursor: (callback: MeasureParentContainerAndCursorCallback) => void; + + /** Reset the emoji suggestions */ + resetSuggestions: () => void; }; /** @@ -62,7 +65,15 @@ type MentionSuggestionsProps = { */ const keyExtractor = (item: Mention) => item.alternateText; -function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSelect, isMentionPickerLarge, measureParentContainerAndReportCursor = () => {}}: MentionSuggestionsProps) { +function MentionSuggestions({ + prefix, + mentions, + highlightedMentionIndex = 0, + onSelect, + isMentionPickerLarge, + measureParentContainerAndReportCursor = () => {}, + resetSuggestions, +}: MentionSuggestionsProps) { const theme = useTheme(); const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); @@ -149,6 +160,7 @@ function MentionSuggestions({prefix, mentions, highlightedMentionIndex = 0, onSe isSuggestionPickerLarge={isMentionPickerLarge} accessibilityLabelExtractor={keyExtractor} measureParentContainerAndReportCursor={measureParentContainerAndReportCursor} + resetSuggestions={resetSuggestions} /> ); } diff --git a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx index bf71937a9e9a..695b931af600 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionEmoji.tsx @@ -222,6 +222,7 @@ function SuggestionEmoji( preferredSkinToneIndex={preferredSkinTone} isEmojiPickerLarge={!!isAutoSuggestionPickerLarge} measureParentContainerAndReportCursor={measureParentContainerAndReportCursor} + resetSuggestions={resetSuggestions} /> ); } diff --git a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx index a103e8271044..eca6202c8bff 100644 --- a/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx +++ b/src/pages/home/report/ReportActionCompose/SuggestionMention.tsx @@ -435,6 +435,7 @@ function SuggestionMention( onSelect={insertSelectedMention} isMentionPickerLarge={!!isAutoSuggestionPickerLarge} measureParentContainerAndReportCursor={measureParentContainerAndReportCursor} + resetSuggestions={resetSuggestions} /> ); } From d00604b0fc3568e5046ae70941e40a7909aa1553 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 9 Jul 2024 15:56:25 +0200 Subject: [PATCH 02/13] TransparentOverlay --- .../TransparentOverlay/index.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx new file mode 100644 index 000000000000..cc684b760c40 --- /dev/null +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx @@ -0,0 +1,40 @@ +import React, {useCallback} from 'react'; +import {View} from 'react-native'; +import type {GestureResponderEvent} from 'react-native'; +import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; + +type TransparentOverlayProps = { + resetSuggestions: () => void; +}; +type OnPressHandler = (event: GestureResponderEvent) => void; + +function TransparentOverlay({resetSuggestions}: TransparentOverlayProps) { + const styles = useThemeStyles(); + + const onResetSuggestions: OnPressHandler = useCallback( + (event: GestureResponderEvent) => { + event?.preventDefault(); + resetSuggestions(); + }, + [resetSuggestions], + ); + return ( + { + e?.preventDefault(); + }} + style={styles.fullScreen} + > + + + ); +} + +export default TransparentOverlay; From f01a12b87ca61fff64f865dac0f4a2de0db9914b Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 9 Jul 2024 15:56:46 +0200 Subject: [PATCH 03/13] use TransparentOverlay WEB --- .../AutoCompleteSuggestionsPortal/index.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx index 2d1d533c2859..1d56ab2cced4 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx @@ -5,6 +5,7 @@ import {View} from 'react-native'; import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; import useStyleUtils from '@hooks/useStyleUtils'; import getBottomSuggestionPadding from './getBottomSuggestionPadding'; +import TransparentOverlay from './TransparentOverlay'; import type {AutoCompleteSuggestionsPortalProps} from './types'; /** @@ -31,7 +32,10 @@ function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom !!width && bodyElement && ReactDOM.createPortal( - {componentToRender}, + <> + + {componentToRender} + , bodyElement, ) ); From cb2e97e504f762fb412483c041cd29b81fb987b8 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 9 Jul 2024 15:57:04 +0200 Subject: [PATCH 04/13] use TransparentOverlay on mobile --- .../AutoCompleteSuggestionsPortal/index.native.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx index 9848d77e479e..d30d97044fc0 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx @@ -4,6 +4,7 @@ import {View} from 'react-native'; import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; import useStyleUtils from '@hooks/useStyleUtils'; import getBottomSuggestionPadding from './getBottomSuggestionPadding'; +import TransparentOverlay from './TransparentOverlay'; import type {AutoCompleteSuggestionsPortalProps} from './types'; function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom = 0, ...props}: AutoCompleteSuggestionsPortalProps) { @@ -16,6 +17,7 @@ function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom return ( + {/* eslint-disable-next-line react/jsx-props-no-spreading */} From 3022ba6c4a70ca8051100f38d2e4f24f3ff678f5 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 9 Jul 2024 15:57:21 +0200 Subject: [PATCH 05/13] update AutoCompleteSuggestions --- .../AutoCompleteSuggestions/index.tsx | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/index.tsx b/src/components/AutoCompleteSuggestions/index.tsx index f1c7fb505921..6de2aaae1bf6 100644 --- a/src/components/AutoCompleteSuggestions/index.tsx +++ b/src/components/AutoCompleteSuggestions/index.tsx @@ -34,6 +34,13 @@ function isEnoughSpaceAbove({y, cursorCoordinates, scrollValue, contentHeight, t return y + (cursorCoordinates.y - scrollValue) > contentHeight + topInset + CONST.AUTO_COMPLETE_SUGGESTER.SUGGESTION_BOX_MAX_SAFE_DISTANCE; } +const initialContainerState = { + width: 0, + left: 0, + bottom: 0, + cursorCoordinates: {x: 0, y: 0}, +}; + /** * 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). @@ -48,12 +55,7 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu const prevLeftValue = React.useRef(0); const {windowHeight, windowWidth, isSmallScreenWidth} = useWindowDimensions(); const [suggestionHeight, setSuggestionHeight] = React.useState(0); - const [containerState, setContainerState] = React.useState({ - width: 0, - left: 0, - bottom: 0, - cursorCoordinates: {x: 0, y: 0}, - }); + const [containerState, setContainerState] = React.useState(initialContainerState); const StyleUtils = useStyleUtils(); const insets = useSafeAreaInsets(); const {keyboardHeight} = useKeyboardState(); @@ -80,6 +82,11 @@ function AutoCompleteSuggestions({measureParentContainerAndReportCu return; } + if (!windowHeight || !windowWidth || !suggestionsLength) { + setContainerState(initialContainerState); + return; + } + measureParentContainerAndReportCursor(({x, y, width, scrollValue, cursorCoordinates}: MeasureParentContainerAndCursor) => { const xCoordinatesOfCursor = x + cursorCoordinates.x; const leftValueForBigScreen = From 28eb075f20f9f6e198d0755c32d331774e371cc4 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Wed, 10 Jul 2024 10:13:40 +0200 Subject: [PATCH 06/13] onPointerDown type --- .../TransparentOverlay/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx index cc684b760c40..ae320c54da43 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx @@ -8,21 +8,23 @@ import CONST from '@src/CONST'; type TransparentOverlayProps = { resetSuggestions: () => void; }; + type OnPressHandler = (event: GestureResponderEvent) => void; function TransparentOverlay({resetSuggestions}: TransparentOverlayProps) { const styles = useThemeStyles(); - const onResetSuggestions: OnPressHandler = useCallback( - (event: GestureResponderEvent) => { + const onResetSuggestions = useCallback( + (event) => { event?.preventDefault(); resetSuggestions(); }, [resetSuggestions], ); + return ( { + onPointerDown={(e) => { e?.preventDefault(); }} style={styles.fullScreen} From 7471681bb21c3ddc80183e03acb47a223d50f09a Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Wed, 10 Jul 2024 11:01:14 +0200 Subject: [PATCH 07/13] lint --- .../TransparentOverlay/index.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx index ae320c54da43..1fcb9a432c5b 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx @@ -1,6 +1,7 @@ import React, {useCallback} from 'react'; import {View} from 'react-native'; -import type {GestureResponderEvent} from 'react-native'; +import type {PointerEvent} from 'react-native'; +import type PressableProps from '@components/Pressable/GenericPressable/types'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -9,12 +10,12 @@ type TransparentOverlayProps = { resetSuggestions: () => void; }; -type OnPressHandler = (event: GestureResponderEvent) => void; +type OnPressHandler = PressableProps['onPress']; function TransparentOverlay({resetSuggestions}: TransparentOverlayProps) { const styles = useThemeStyles(); - const onResetSuggestions = useCallback( + const onResetSuggestions = useCallback>( (event) => { event?.preventDefault(); resetSuggestions(); @@ -22,11 +23,13 @@ function TransparentOverlay({resetSuggestions}: TransparentOverlayProps) { [resetSuggestions], ); + const handlePointerDown = useCallback((e: PointerEvent) => { + e?.preventDefault(); + }, []); + return ( { - e?.preventDefault(); - }} + onPointerDown={handlePointerDown} style={styles.fullScreen} > Date: Thu, 11 Jul 2024 14:15:12 +0200 Subject: [PATCH 08/13] clean after merge --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 40e9a4c6bf41..1148934a1135 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -196,7 +196,7 @@ function ReportActionItemMessageEdit( } // Show the main composer when the focused message is deleted from another client - // to prevent the main composer stays hidden until we swtich to another chat. + // to prevent the main composer stays hidden until we switch to another chat. setShouldShowComposeInputKeyboardAware(true); }; }, @@ -403,8 +403,7 @@ function ReportActionItemMessageEdit( } containerRef.current.measureInWindow(callback); }, - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - [isFocused], + [], ); const measureParentContainerAndReportCursor = useCallback( @@ -428,10 +427,8 @@ function ReportActionItemMessageEdit( useEffect(() => { // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data. - // eslint-disable-next-line react-compiler/react-compiler tag.value = findNodeHandle(textInputRef.current) ?? -1; - // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps - }, []); + }, [tag]); useFocusedInputHandler( { onSelectionChange: (event) => { From 7bf9646e143f31a215cd9935d2beb92d20a8cad3 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 11 Jul 2024 14:28:26 +0200 Subject: [PATCH 09/13] bring back react-compiler lint --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 1148934a1135..ad142c08a26a 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -427,6 +427,7 @@ function ReportActionItemMessageEdit( useEffect(() => { // We use the tag to store the native ID of the text input. Later, we use it in onSelectionChange to pick up the proper text input data. + // eslint-disable-next-line react-compiler/react-compiler tag.value = findNodeHandle(textInputRef.current) ?? -1; }, [tag]); useFocusedInputHandler( From 36388523234577a53accc0b00653e90868b94f1e Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 11 Jul 2024 14:40:59 +0200 Subject: [PATCH 10/13] lint --- .../home/report/ReportActionItemMessageEdit.tsx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index ad142c08a26a..fbb8c7252164 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -396,15 +396,12 @@ function ReportActionItemMessageEdit( [deleteDraft, hideSuggestionMenu, isKeyboardShown, isSmallScreenWidth, publishDraft], ); - const measureContainer = useCallback( - (callback: MeasureInWindowOnSuccessCallback) => { - if (!containerRef.current) { - return; - } - containerRef.current.measureInWindow(callback); - }, - [], - ); + const measureContainer = useCallback((callback: MeasureInWindowOnSuccessCallback) => { + if (!containerRef.current) { + return; + } + containerRef.current.measureInWindow(callback); + }, []); const measureParentContainerAndReportCursor = useCallback( (callback: MeasureParentContainerAndCursorCallback) => { From 0387a7007f4f1770e82c6b8391f0bcd3fef16615 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Tue, 16 Jul 2024 12:49:37 +0200 Subject: [PATCH 11/13] update typings --- .../{index.tsx => TransparentOverlay.tsx} | 0 .../AutoCompleteSuggestionsPortal/index.native.tsx | 6 +++--- .../AutoCompleteSuggestionsPortal/index.tsx | 12 +++++++++--- src/components/AutoCompleteSuggestions/types.ts | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) rename src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/{index.tsx => TransparentOverlay.tsx} (100%) diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx similarity index 100% rename from src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/index.tsx rename to src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx index d30d97044fc0..9ac43c4d8830 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.native.tsx @@ -4,10 +4,10 @@ import {View} from 'react-native'; import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; import useStyleUtils from '@hooks/useStyleUtils'; import getBottomSuggestionPadding from './getBottomSuggestionPadding'; -import TransparentOverlay from './TransparentOverlay'; +import TransparentOverlay from './TransparentOverlay/TransparentOverlay'; import type {AutoCompleteSuggestionsPortalProps} from './types'; -function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom = 0, ...props}: AutoCompleteSuggestionsPortalProps) { +function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom = 0, resetSuggestions = () => {}, ...props}: AutoCompleteSuggestionsPortalProps) { const StyleUtils = useStyleUtils(); const styles = useMemo(() => StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()}), [StyleUtils, left, width, bottom]); @@ -17,7 +17,7 @@ function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom return ( - + {/* eslint-disable-next-line react/jsx-props-no-spreading */} diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx index 1d56ab2cced4..d26dd0422368 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx @@ -5,7 +5,7 @@ import {View} from 'react-native'; import BaseAutoCompleteSuggestions from '@components/AutoCompleteSuggestions/BaseAutoCompleteSuggestions'; import useStyleUtils from '@hooks/useStyleUtils'; import getBottomSuggestionPadding from './getBottomSuggestionPadding'; -import TransparentOverlay from './TransparentOverlay'; +import TransparentOverlay from './TransparentOverlay/TransparentOverlay'; import type {AutoCompleteSuggestionsPortalProps} from './types'; /** @@ -15,7 +15,13 @@ import type {AutoCompleteSuggestionsPortalProps} from './types'; * On the native platform, tapping on auto-complete suggestions will not blur the main input. */ -function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom = 0, ...props}: AutoCompleteSuggestionsPortalProps): ReactElement | null | false { +function AutoCompleteSuggestionsPortal({ + left = 0, + width = 0, + bottom = 0, + resetSuggestions = () => {}, + ...props +}: AutoCompleteSuggestionsPortalProps): ReactElement | null | false { const StyleUtils = useStyleUtils(); const bodyElement = document.querySelector('body'); @@ -33,7 +39,7 @@ function AutoCompleteSuggestionsPortal({left = 0, width = 0, bottom bodyElement && ReactDOM.createPortal( <> - + {componentToRender} , bodyElement, diff --git a/src/components/AutoCompleteSuggestions/types.ts b/src/components/AutoCompleteSuggestions/types.ts index b60407e70beb..57347cd65abe 100644 --- a/src/components/AutoCompleteSuggestions/types.ts +++ b/src/components/AutoCompleteSuggestions/types.ts @@ -44,7 +44,7 @@ type AutoCompleteSuggestionsProps = { measureParentContainerAndReportCursor?: (props: MeasureParentContainerAndCursorCallback) => void; /** Reset the emoji suggestions */ - resetSuggestions: () => void; + resetSuggestions?: () => void; }; export type {AutoCompleteSuggestionsProps, RenderSuggestionMenuItemProps, MeasureParentContainerAndCursorCallback, MeasureParentContainerAndCursor}; From cdae06dcd0a858533441c4a70029505982b0dc94 Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 18 Jul 2024 12:32:28 +0200 Subject: [PATCH 12/13] add cursor styles --- .../TransparentOverlay/TransparentOverlay.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx index 1fcb9a432c5b..c761faccad39 100644 --- a/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx +++ b/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/TransparentOverlay/TransparentOverlay.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import type {PointerEvent} from 'react-native'; import type PressableProps from '@components/Pressable/GenericPressable/types'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; +import useLocalize from '@hooks/useLocalize'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -13,6 +14,7 @@ type TransparentOverlayProps = { type OnPressHandler = PressableProps['onPress']; function TransparentOverlay({resetSuggestions}: TransparentOverlayProps) { + const {translate} = useLocalize(); const styles = useThemeStyles(); const onResetSuggestions = useCallback>( @@ -34,9 +36,9 @@ function TransparentOverlay({resetSuggestions}: TransparentOverlayProps) { > ); From 813b8a4b829decf45815371296800dd671277e6c Mon Sep 17 00:00:00 2001 From: Taras Perun Date: Thu, 18 Jul 2024 12:39:59 +0200 Subject: [PATCH 13/13] fix hotkey actions on suggestion box --- src/pages/home/report/ReportActionItemMessageEdit.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index 9c0b2ed5c373..726679351b79 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -354,7 +354,7 @@ function ReportActionItemMessageEdit( const keyEvent = e as KeyboardEvent; const isSuggestionsMenuVisible = suggestionsRef.current?.getIsSuggestionsMenuVisible(); - if (isSuggestionsMenuVisible && keyEvent.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) { + if (isSuggestionsMenuVisible) { suggestionsRef.current?.triggerHotkeyActions(keyEvent); return; }