Merge pull request #71417 from NJ-2020/fix/68722-1

fix edit comment input: mention suggestions is not displayed

Author: cristipaval

src/hooks/useIsScrollLikelyLayoutTriggered.ts

@@ -0,0 +1,26 @@
+import {useCallback, useRef} from 'react';
+import useDebounce from './useDebounce';
+
+export default function useIsScrollLikelyLayoutTriggered() {
+    // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
+    const isScrollLayoutTriggered = useRef(false);
+
+    /**
+     * Reset isScrollLikelyLayoutTriggered to false.
+     *
+     * The function is debounced with a handpicked wait time to address 2 issues:
+     * 1. There is a slight delay between onChangeText and onScroll
+     * 2. Layout change will trigger onScroll multiple times
+     */
+    const debouncedLowerIsScrollLayoutTriggered = useDebounce(
+        useCallback(() => (isScrollLayoutTriggered.current = false), []),
+        500,
+    );
+
+    const raiseIsScrollLayoutTriggered = useCallback(() => {
+        isScrollLayoutTriggered.current = true;
+        debouncedLowerIsScrollLayoutTriggered();
+    }, [debouncedLowerIsScrollLayoutTriggered]);
+
+    return {isScrollLayoutTriggered, raiseIsScrollLayoutTriggered};
+}

src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx

@@ -19,9 +19,9 @@ import OfflineIndicator from '@components/OfflineIndicator';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import {usePersonalDetails} from '@components/OnyxListItemProvider';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
-import useDebounce from '@hooks/useDebounce';
 import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
 import useHandleExceedMaxTaskTitleLength from '@hooks/useHandleExceedMaxTaskTitleLength';
+import useIsScrollLikelyLayoutTriggered from '@hooks/useIsScrollLikelyLayoutTriggered';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -155,25 +155,7 @@ function ReportActionCompose({
     });
     const [isFullComposerAvailable, setIsFullComposerAvailable] = useState(isComposerFullSize);
 
-    // A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
-    const isScrollLikelyLayoutTriggered = useRef(false);
-
-    /**
-     * Reset isScrollLikelyLayoutTriggered to false.
-     *
-     * The function is debounced with a handpicked wait time to address 2 issues:
-     * 1. There is a slight delay between onChangeText and onScroll
-     * 2. Layout change will trigger onScroll multiple times
-     */
-    const debouncedLowerIsScrollLikelyLayoutTriggered = useDebounce(
-        useCallback(() => (isScrollLikelyLayoutTriggered.current = false), []),
-        500,
-    );
-
-    const raiseIsScrollLikelyLayoutTriggered = useCallback(() => {
-        isScrollLikelyLayoutTriggered.current = true;
-        debouncedLowerIsScrollLikelyLayoutTriggered();
-    }, [debouncedLowerIsScrollLikelyLayoutTriggered]);
+    const {isScrollLayoutTriggered, raiseIsScrollLayoutTriggered} = useIsScrollLikelyLayoutTriggered();
 
     const [isCommentEmpty, setIsCommentEmpty] = useState(() => {
         const draftComment = getDraftComment(reportID);
@@ -534,7 +516,7 @@ function ReportActionCompose({
                             setMenuVisibility={setMenuVisibility}
                             isMenuVisible={isMenuVisible}
                             onTriggerAttachmentPicker={onTriggerAttachmentPicker}
-                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
+                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLayoutTriggered}
                             onAddActionPressed={onAddActionPressed}
                             onItemSelected={onItemSelected}
                             onCanceledAttachmentPicker={() => {
@@ -555,8 +537,8 @@ function ReportActionCompose({
                             }}
                             suggestionsRef={suggestionsRef}
                             isNextModalWillOpenRef={isNextModalWillOpenRef}
-                            isScrollLikelyLayoutTriggered={isScrollLikelyLayoutTriggered}
-                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLikelyLayoutTriggered}
+                            isScrollLikelyLayoutTriggered={isScrollLayoutTriggered}
+                            raiseIsScrollLikelyLayoutTriggered={raiseIsScrollLayoutTriggered}
                             reportID={reportID}
                             policyID={report?.policyID}
                             includeChronos={chatIncludesChronos(report)}

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -16,6 +16,7 @@ import * as Expensicons from '@components/Icon/Expensicons';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import Tooltip from '@components/Tooltip';
 import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength';
+import useIsScrollLikelyLayoutTriggered from '@hooks/useIsScrollLikelyLayoutTriggered';
 import useKeyboardState from '@hooks/useKeyboardState';
 import useLocalize from '@hooks/useLocalize';
 import useOnyx from '@hooks/useOnyx';
@@ -133,6 +134,8 @@ function ReportActionItemMessageEdit({
     const {hasExceededMaxCommentLength, validateCommentMaxLength} = useHandleExceedMaxCommentLength();
     const debouncedValidateCommentMaxLength = useMemo(() => lodashDebounce(validateCommentMaxLength, CONST.TIMING.COMMENT_LENGTH_DEBOUNCE_TIME), [validateCommentMaxLength]);
 
+    const {isScrollLayoutTriggered, raiseIsScrollLayoutTriggered} = useIsScrollLikelyLayoutTriggered();
+
     const [modal = DEFAULT_MODAL_VALUE] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
     const [onyxInputFocused = false] = useOnyx(ONYXKEYS.INPUT_FOCUSED, {canBeMissing: true});
 
@@ -236,6 +239,7 @@ function ReportActionItemMessageEdit({
      */
     const updateDraft = useCallback(
         (newDraftInput: string) => {
+            raiseIsScrollLayoutTriggered();
             const {text: newDraft, emojis, cursorPosition} = replaceAndExtractEmojis(newDraftInput, preferredSkinTone, preferredLocale);
 
             emojisPresentBefore.current = emojis;
@@ -258,7 +262,7 @@ function ReportActionItemMessageEdit({
             debouncedSaveDraft(newDraft);
             isCommentPendingSaved.current = true;
         },
-        [debouncedSaveDraft, preferredSkinTone, preferredLocale, selection.end],
+        [raiseIsScrollLayoutTriggered, debouncedSaveDraft, preferredSkinTone, preferredLocale, selection.end],
     );
 
     useEffect(() => {
@@ -337,11 +341,14 @@ function ReportActionItemMessageEdit({
     }, [suggestionsRef]);
     const onSaveScrollAndHideSuggestionMenu = useCallback(
         (e: NativeSyntheticEvent<TextInputScrollEventData>) => {
+            if (isScrollLayoutTriggered.current) {
+                return;
+            }
             mobileInputScrollPosition.current = e?.nativeEvent?.contentOffset?.y ?? 0;
 
             hideSuggestionMenu();
         },
-        [hideSuggestionMenu],
+        [isScrollLayoutTriggered, hideSuggestionMenu],
     );
 
     /**