From 1d4aef156bcac0759cb1c5dbd51189071dffb6c8 Mon Sep 17 00:00:00 2001
From: Taras Perun <terry.perun@gmail.com>
Date: Thu, 25 Jan 2024 11:43:54 +0100
Subject: [PATCH] fix scrolling to the bottom on action deletion from the same
 account on a different device

---
 .../InvertedFlatList/BaseInvertedFlatList.tsx |  1 +
 src/pages/home/report/ReportActionsList.js    | 21 +++++++------------
 src/pages/home/report/ReportActionsView.js    |  4 ++--
 3 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/components/InvertedFlatList/BaseInvertedFlatList.tsx b/src/components/InvertedFlatList/BaseInvertedFlatList.tsx
index e007f63c8e97..d83e54f74d66 100644
--- a/src/components/InvertedFlatList/BaseInvertedFlatList.tsx
+++ b/src/components/InvertedFlatList/BaseInvertedFlatList.tsx
@@ -39,3 +39,4 @@ function BaseInvertedFlatList<T>(props: BaseInvertedFlatListProps<T>, ref: Forwa
 BaseInvertedFlatList.displayName = 'BaseInvertedFlatList';
 
 export default forwardRef(BaseInvertedFlatList);
+export {AUTOSCROLL_TO_TOP_THRESHOLD};
diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 8bc26eea7d70..3a397b4f6cf6 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -6,6 +6,7 @@ import {DeviceEventEmitter, InteractionManager} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import _ from 'underscore';
 import InvertedFlatList from '@components/InvertedFlatList';
+import {AUTOSCROLL_TO_TOP_THRESHOLD} from '@components/InvertedFlatList/BaseInvertedFlatList';
 import {withPersonalDetails} from '@components/OnyxProvider';
 import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultProps, withCurrentUserPersonalDetailsPropTypes} from '@components/withCurrentUserPersonalDetails';
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
@@ -177,12 +178,7 @@ function ReportActionsList({
     const previousLastIndex = useRef(lastActionIndex);
 
     const linkedReportActionID = lodashGet(route, 'params.reportActionID', '');
-    const lastPendingAction = lodashGet(sortedReportActions, [0, 'pendingAction'])
-    const isLastPendingActionIsAdd = lastPendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.ADD;
-    const isLastPendingActionIsDelete = lastPendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
-
-    // This is utilized for automatically scrolling to the bottom when sending a new message, in cases where comment linking is used and the user is already at the end of the list.
-    const isNewestActionAvailableAndPendingAdd = linkedReportActionID && isLastPendingActionIsAdd;
+    const isLastPendingActionIsDelete = lodashGet(sortedReportActions, [0, 'pendingAction']) === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
     // This state is used to force a re-render when the user manually marks a message as unread
     // by using a timestamp you can force re-renders without having to worry about if another message was marked as unread before
@@ -198,17 +194,16 @@ function ReportActionsList({
 
     useEffect(() => {
         if (
-            (previousLastIndex.current !== lastActionIndex && reportActionSize.current > sortedVisibleReportActions.length && hasNewestReportAction) ||
-            isNewestActionAvailableAndPendingAdd
+            scrollingVerticalOffset.current < AUTOSCROLL_TO_TOP_THRESHOLD &&
+            previousLastIndex.current !== lastActionIndex &&
+            reportActionSize.current > sortedVisibleReportActions.length &&
+            hasNewestReportAction
         ) {
-            // runAfterInteractions is used for isNewestActionAvailableAndPendingAdd
-            InteractionManager.runAfterInteractions(() => {
-                reportScrollManager.scrollToBottom();
-            });
+            reportScrollManager.scrollToBottom();
         }
         previousLastIndex.current = lastActionIndex;
         reportActionSize.current = sortedVisibleReportActions.length;
-    }, [lastActionIndex, sortedVisibleReportActions, reportScrollManager, hasNewestReportAction, isLastPendingActionIsAdd, linkedReportActionID, isNewestActionAvailableAndPendingAdd]);
+    }, [lastActionIndex, sortedVisibleReportActions, reportScrollManager, hasNewestReportAction, linkedReportActionID]);
 
     useEffect(() => {
         // If the reportID changes, we reset the userActiveSince to null, we need to do it because
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 8b674b9e05a9..eb6c7634f536 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -426,7 +426,7 @@ function ReportActionsView({reportActions: allReportActions, ...props}) {
     ]);
 
     // Check if the first report action in the list is the one we're currently linked to
-    const isTheFirstReportActionIsLinked = firstReportActionID !== reportActionID;
+    const isTheFirstReportActionIsLinked = firstReportActionID === reportActionID;
 
     useEffect(() => {
         if (isTheFirstReportActionIsLinked) {
@@ -444,7 +444,7 @@ function ReportActionsView({reportActions: allReportActions, ...props}) {
         return null;
     }
     // AutoScroll is disabled when we do linking to a specific reportAction
-    const shouldEnableAutoScroll = hasNewestReportAction && (!reportActionID || isInitialLinkedView);
+    const shouldEnableAutoScroll = hasNewestReportAction && (!reportActionID || !isInitialLinkedView);
 
     return (
         <>