Merge pull request #40286 from ikevin127/fix/38855

[CP Staging] Chat is not scrolled to the new message on a newly created WS chat after whisper message

(cherry picked from commit 39841b8)

src/hooks/useReportScrollManager/index.ts

@@ -21,11 +21,15 @@ function useReportScrollManager(): ReportScrollManagerData {
      * Scroll to the bottom of the flatlist.
      */
     const scrollToBottom = useCallback(() => {
-        if (!flatListRef?.current) {
-            return;
-        }
+        // We're deferring execution here because on iOS: mWeb (WebKit based browsers)
+        // scrollToOffset method doesn't work unless called on the next tick
+        requestAnimationFrame(() => {
+            if (!flatListRef?.current) {
+                return;
+            }
 
-        flatListRef.current.scrollToOffset({animated: false, offset: 0});
+            flatListRef.current.scrollToOffset({animated: false, offset: 0});
+        });
     }, [flatListRef]);
 
     return {ref: flatListRef, scrollToIndex, scrollToBottom};

src/pages/home/report/ReportActionsList.tsx

@@ -325,14 +325,16 @@ function ReportActionsList({
 
     const scrollToBottomForCurrentUserAction = useCallback(
         (isFromCurrentUser: boolean) => {
-            // If a new comment is added and it's from the current user scroll to the bottom otherwise leave the user positioned where
-            // they are now in the list.
-            if (!isFromCurrentUser || !hasNewestReportActionRef.current) {
+            // If a new comment is added and it's from the current user scroll to the bottom
+            // otherwise leave the user positioned where they are now in the list.
+            // Additionally, since the first report action could be a whisper message (new WS) ->
+            // hasNewestReportAction will be false, check isWhisperAction is false before returning early.
+            if (!isFromCurrentUser || (!hasNewestReportActionRef.current && !ReportActionsUtils.isWhisperAction(sortedReportActions?.[0]))) {
                 return;
             }
             InteractionManager.runAfterInteractions(() => reportScrollManager.scrollToBottom());
         },
-        [reportScrollManager],
+        [sortedReportActions, reportScrollManager],
     );
     useEffect(() => {
         // Why are we doing this, when in the cleanup of the useEffect we are already calling the unsubscribe function?