From f7c685c8c7394dcc3040a53148616c2512266ae5 Mon Sep 17 00:00:00 2001 From: Vit Horacek <36083550+mountiny@users.noreply.github.com> Date: Fri, 20 Feb 2026 09:42:30 +0100 Subject: [PATCH] Revert "fix: Expense created while on "Reports", gets highlighted again when opened. " --- src/hooks/useSearchHighlightAndScroll.ts | 37 ++++++++++-------------- 1 file changed, 15 insertions(+), 22 deletions(-) diff --git a/src/hooks/useSearchHighlightAndScroll.ts b/src/hooks/useSearchHighlightAndScroll.ts index aaae40f0808b..300839312989 100644 --- a/src/hooks/useSearchHighlightAndScroll.ts +++ b/src/hooks/useSearchHighlightAndScroll.ts @@ -237,18 +237,23 @@ function useSearchHighlightAndScroll({ return; } - // As we depend on newSearchResultKeys to determine which transactionIDs to reset from transactionIDsToHighlight, - // we need to ensure that newSearchResultKeys is not cleared before we reset transactionIDsToHighlight const highlightedTransactionIDs = Object.keys(transactionIDsToHighlight).filter( (id) => transactionIDsToHighlight[id] && newSearchResultKeys?.has(`${ONYXKEYS.COLLECTION.TRANSACTION}${id}`), ); - const timer = setTimeout(() => { - mergeTransactionIdsHighlightOnSearchRoute(queryJSON.type, Object.fromEntries(highlightedTransactionIDs.map((id) => [id, false]))); - }, CONST.ANIMATED_HIGHLIGHT_START_DURATION); - + // We need to use requestAnimationFrame here to ensure that setTimeout actually starts + // only after the user has navigated to the "Reports > Expenses" page. + // Otherwise, there is still a chance we might miss the timing because setTimeout runs too early, + // causing the highlight not to appear. + let timer: NodeJS.Timeout; + const animation = requestAnimationFrame(() => { + timer = setTimeout(() => { + mergeTransactionIdsHighlightOnSearchRoute(queryJSON.type, Object.fromEntries(highlightedTransactionIDs.map((id) => [id, false]))); + }, CONST.ANIMATED_HIGHLIGHT_START_DURATION); + }); return () => { clearTimeout(timer); + cancelAnimationFrame(animation); }; }, [transactionIDsToHighlight, queryJSON.type, newSearchResultKeys]); @@ -266,23 +271,11 @@ function useSearchHighlightAndScroll({ return; } - // We need to use requestAnimationFrame here to ensure that setTimeout actually starts - // only after "Reports > Expenses" pages finishes the current rendering cycle and the user sees the highlight, - // which is when we want to start the timer to remove the highlight. - // Otherwise, there is still a chance we might miss the timing because setTimeout runs too early, - // causing the highlight not to appear. - - let timer: NodeJS.Timeout; - const animation = requestAnimationFrame(() => { - timer = setTimeout(() => { - setNewSearchResultKeys(null); - }, CONST.ANIMATED_HIGHLIGHT_START_DURATION); - }); + const timer = setTimeout(() => { + setNewSearchResultKeys(null); + }, CONST.ANIMATED_HIGHLIGHT_START_DURATION); - return () => { - clearTimeout(timer); - cancelAnimationFrame(animation); - }; + return () => clearTimeout(timer); }, [newSearchResultKeys]); /**