diff --git a/src/hooks/useReportScrollManager/index.ts b/src/hooks/useReportScrollManager/index.ts index 8b56cd639d08..0d52dfd63159 100644 --- a/src/hooks/useReportScrollManager/index.ts +++ b/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}; diff --git a/src/pages/home/report/ReportActionsList.tsx b/src/pages/home/report/ReportActionsList.tsx index c280a093cb13..3c6038697c67 100644 --- a/src/pages/home/report/ReportActionsList.tsx +++ b/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?