[WIP] Update Yellow Highlight Dismissal Behavior

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

@@ -45,6 +45,7 @@ import * as Report from '@userActions/Report';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {getClearIsReportActionLinked} from '@src/pages/home/report/clearReportAction';
 import type * as OnyxTypes from '@src/types/onyx';
 import type * as OnyxCommon from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
@@ -230,6 +231,8 @@ function ReportActionCompose({
 
     const onItemSelected = useCallback(() => {
         isKeyboardVisibleWhenShowingModalRef.current = false;
+        // Clear the highlighted report item when an action from the + menu is taken
+        getClearIsReportActionLinked()();
     }, []);
 
     const updateShouldShowSuggestionMenuToFalse = useCallback(() => {
@@ -274,6 +277,8 @@ function ReportActionCompose({
                 Performance.markStart(CONST.TIMING.MESSAGE_SENT, {message: newCommentTrimmed});
                 onSubmit(newCommentTrimmed);
             }
+            // Clear the highlighted report item when a new comment or attachment is sent
+            getClearIsReportActionLinked()();
         },
         [onSubmit, reportID],
     );

src/pages/home/report/ReportActionItem.tsx

@@ -121,6 +121,7 @@ type ReportActionItemProps = {
     /** Flag to show, hide the thread divider line */
     shouldHideThreadDividerLine?: boolean;
 
+    /** Linked report action ID */
     linkedReportActionID?: string;
 
     /** Callback to be called on onPress */

src/pages/home/report/ReportActionsList.tsx

@@ -32,6 +32,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
+import {setClearIsReportActionLinked} from './clearReportAction';
 import FloatingMessageCounter from './FloatingMessageCounter';
 import getInitialNumToRender from './getInitialNumReportActionsToRender';
 import ListBoundaryLoader from './ListBoundaryLoader';
@@ -184,7 +185,23 @@ function ReportActionsList({
     const readActionSkipped = useRef(false);
     const hasHeaderRendered = useRef(false);
     const hasFooterRendered = useRef(false);
-    const linkedReportActionID = route?.params?.reportActionID ?? '-1';
+    const [linkedReportActionID, setLinkedReportActionID] = useState(route?.params?.reportActionID ?? '-1');
+
+    const clearIsReportActionLinked = useCallback(() => {
+        setLinkedReportActionID('-1');
+    }, []);
+
+    useEffect(() => {
+        setClearIsReportActionLinked(clearIsReportActionLinked);
+    }, [clearIsReportActionLinked]);
+
+    useEffect(() => {
+        if (route?.params?.reportActionID) {
+            setLinkedReportActionID(route.params.reportActionID);
+        } else {
+            setLinkedReportActionID('-1');
+        }
+    }, [route]);
 
     const sortedVisibleReportActions = useMemo(
         () =>

src/pages/home/report/clearReportAction.ts

@@ -0,0 +1,9 @@
+let clearIsReportActionLinked: () => void = () => {};
+
+const setClearIsReportActionLinked = (fn: () => void) => {
+    clearIsReportActionLinked = fn;
+};
+
+const getClearIsReportActionLinked = () => clearIsReportActionLinked;
+
+export {setClearIsReportActionLinked, getClearIsReportActionLinked};

src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.tsx

@@ -33,6 +33,7 @@ import * as Task from '@userActions/Task';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {getClearIsReportActionLinked} from '@src/pages/home/report/clearReportAction';
 import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
@@ -351,13 +352,19 @@ function FloatingActionButtonAndPopover(
     // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     const selfDMReportID = useMemo(() => ReportUtils.findSelfDMReportID(), [isLoading]);
 
+    const onItemSelected = useCallback(() => {
+        hideCreateMenu();
+        // Clear the highlighted report item when an action from the + menu is taken
+        getClearIsReportActionLinked()();
+    }, [hideCreateMenu]);
+
     return (
         <View style={styles.flexGrow1}>
             <PopoverMenu
                 onClose={hideCreateMenu}
                 isVisible={isCreateMenuActive && (!shouldUseNarrowLayout || isFocused)}
                 anchorPosition={styles.createMenuPositionSidebar(windowHeight)}
-                onItemSelected={hideCreateMenu}
+                onItemSelected={onItemSelected}
                 fromSidebarMediumScreen={!shouldUseNarrowLayout}
                 menuItems={[
                     {