Fix/64631 Added delay for suggestion on appearance

src/hooks/useScrollBlocker/index.tsx

@@ -0,0 +1,34 @@
+import {useCallback, useEffect, useRef, useState} from 'react';
+
+/**
+ * A hook that tracks scrolling state to block certain actions during scroll events.
+ * Since scroll events don't provide an "end" callback, this implements uses a timeout
+ * to detect when scrolling has likely stopped (300ms delay).
+ */
+export default function useScrollBlocker() {
+    const [isScrolling, setIsScrolling] = useState(false);
+    const scrollTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const startScrollBlock = useCallback(() => {
+        setIsScrolling(true);
+    }, []);
+
+    const endScrollBlock = useCallback(() => {
+        if (scrollTimeoutRef.current) {
+            clearTimeout(scrollTimeoutRef.current);
+        }
+        scrollTimeoutRef.current = setTimeout(() => {
+            setIsScrolling(false);
+        }, 300);
+    }, []);
+
+    useEffect(() => {
+        return () => {
+            if (!scrollTimeoutRef.current) {
+                return;
+            }
+            clearTimeout(scrollTimeoutRef.current);
+        };
+    }, []);
+
+    return {isScrolling, startScrollBlock, endScrollBlock};
+}

src/pages/home/report/ReportActionItemMessageEdit.tsx

@@ -22,6 +22,7 @@ import useOnyx from '@hooks/useOnyx';
 import usePrevious from '@hooks/usePrevious';
 import useReportScrollManager from '@hooks/useReportScrollManager';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useScrollBlocker from '@hooks/useScrollBlocker';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -121,6 +122,8 @@ function ReportActionItemMessageEdit(
     const [modal = DEFAULT_MODAL_VALUE] = useOnyx(ONYXKEYS.MODAL, {canBeMissing: true});
     const [onyxInputFocused = false] = useOnyx(ONYXKEYS.INPUT_FOCUSED, {canBeMissing: true});
 
+    const {isScrolling, startScrollBlock, endScrollBlock} = useScrollBlocker();
+
     const textInputRef = useRef<(HTMLTextAreaElement & TextInput) | null>(null);
     const isFocusedRef = useRef<boolean>(false);
     const draftRef = useRef(draft);
@@ -364,20 +367,28 @@ function ReportActionItemMessageEdit(
 
     const measureParentContainerAndReportCursor = useCallback(
         (callback: MeasureParentContainerAndCursorCallback) => {
-            const {scrollValue} = getScrollPosition({mobileInputScrollPosition, textInputRef});
-            const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.get(), positionOnWeb: selection});
-            measureContainer((x, y, width, height) => {
-                callback({
-                    x,
-                    y,
-                    width,
-                    height,
-                    scrollValue,
-                    cursorCoordinates: {x: xPosition, y: yPosition},
+            const performMeasurement = () => {
+                const {scrollValue} = getScrollPosition({mobileInputScrollPosition, textInputRef});
+                const {x: xPosition, y: yPosition} = getCursorPosition({positionOnMobile: cursorPositionValue.get(), positionOnWeb: selection});
+                measureContainer((x, y, width, height) => {
+                    callback({
+                        x,
+                        y,
+                        width,
+                        height,
+                        scrollValue,
+                        cursorCoordinates: {x: xPosition, y: yPosition},
+                    });
                 });
-            });
+            };
+
+            if (isScrolling) {
+                return;
+            }
+
+            performMeasurement();
         },
-        [cursorPositionValue, measureContainer, selection],
+        [cursorPositionValue, measureContainer, selection, isScrolling],
     );
 
     useEffect(() => {
@@ -472,9 +483,11 @@ function ReportActionItemMessageEdit(
                                 if (textInputRef.current) {
                                     ReportActionComposeFocusManager.editComposerRef.current = textInputRef.current;
                                 }
+                                startScrollBlock();
                                 InteractionManager.runAfterInteractions(() => {
                                     requestAnimationFrame(() => {
                                         reportScrollManager.scrollToIndex(index, true);
+                                        endScrollBlock();
                                     });
                                 });
                                 if (isMobileChrome() && reportScrollManager.ref?.current) {