From 56fa57c571286ac6e9c9a00d07d11cfafe3eddeb Mon Sep 17 00:00:00 2001 From: Gabriel Mechali Date: Wed, 13 Nov 2024 14:07:16 -0500 Subject: [PATCH] Desensitize hiding the autocomplete results on scroll. (#4731) Only hides the autocomplete results after 15% of window width has been scrolled through. https://screencast.googleplex.com/cast/NjMyMDgzNjY5MTYyMzkzNnxmNjAxODU2Yy0xZQ --- .../components/nl_search_bar/auto_complete_input.tsx | 11 ++++------- 1 file changed, 4 insertions(+), 7 deletions(-) diff --git a/static/js/components/nl_search_bar/auto_complete_input.tsx b/static/js/components/nl_search_bar/auto_complete_input.tsx index cf47244557..fcf1491915 100644 --- a/static/js/components/nl_search_bar/auto_complete_input.tsx +++ b/static/js/components/nl_search_bar/auto_complete_input.tsx @@ -82,7 +82,9 @@ export function AutoCompleteInput( const [lastAutoCompleteSelection, setLastAutoCompleteSelection] = useState(""); // Used to reduce sensitivity to scrolling for autocomplete result dismissal. + // Tracks the last scrollY value at time of autocomplete request. const [lastScrollYOnTrigger, setLastScrollYOnTrigger] = useState(0); + // Tracks the last scrollY value for current height offsett. const [lastScrollY, setLastScrollY] = useState(0); const isHeaderBar = props.barType == "header"; @@ -99,7 +101,7 @@ export function AutoCompleteInput( }, []); // Whenever any of the scrollY states change, recompute to see if we need to hide the results. - // We only hide the results when the user has scrolled past 15% of the window height. + // We only hide the results when the user has scrolled past 15% of the window height since the autocomplete request. // It allows the user to navigate through the page without being annoyed by the results, // and to scroll through the results without them disappearing. useEffect(() => { @@ -109,12 +111,7 @@ export function AutoCompleteInput( ) { setResults({ placeResults: [], svResults: [] }); } - }, [ - lastScrollY, - setLastScrollY, - lastScrollYOnTrigger, - setLastScrollYOnTrigger, - ]); + }, [lastScrollY, lastScrollYOnTrigger]); useEffect(() => { // For the first load when q= param is set, we want to ensure the