Merge pull request #52606 from wildan-m/wildan/fix/50562-fix-list-not…

…-scrolled-up-when-query-empty Fix: User not scrolled to top of chats list when scrolling down and deleting search
Expensify · Nov 20, 2024 · 2d2555b · 2d2555b
2 parents 1b2643f + 6284cb8
commit 2d2555b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/src/components/Search/SearchRouter/SearchRouter.tsx b/src/components/Search/SearchRouter/SearchRouter.tsx
@@ -1,5 +1,6 @@
 import {useNavigationState} from '@react-navigation/native';
 import {Str} from 'expensify-common';
+import isEmpty from 'lodash/isEmpty';
 import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {TextInputProps} from 'react-native';
@@ -323,6 +324,7 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
         ],
     );
 
+    const prevUserQueryRef = useRef<string | null>(null);
     useEffect(() => {
         Report.searchInServer(debouncedInputValue.trim());
     }, [debouncedInputValue]);
@@ -340,11 +342,14 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
             const updatedSubstitutionsMap = getUpdatedSubstitutionsMap(userQuery, autocompleteSubstitutions);
             setAutocompleteSubstitutions(updatedSubstitutionsMap);
 
-            if (newUserQuery) {
+            if (newUserQuery || !isEmpty(prevUserQueryRef.current)) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
             } else {
                 listRef.current?.updateAndScrollToFocusedIndex(-1);
             }
+
+            // Store the previous newUserQuery
+            prevUserQueryRef.current = newUserQuery;
         },
         [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete],
     );

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -645,10 +645,13 @@ function BaseSelectionList<TItem extends ListItem>(
         ) {
             return;
         }
-        // Remove the focus if the search input is empty or selected options length is changed (and allOptions length remains the same)
+        // Remove the focus if the search input is empty and prev search input not empty or selected options length is changed (and allOptions length remains the same)
         // else focus on the first non disabled item
         const newSelectedIndex =
-            textInputValue === '' || (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length) ? -1 : 0;
+            (isEmpty(prevTextInputValue) && textInputValue === '') ||
+            (flattenedSections.selectedOptions.length !== prevSelectedOptionsLength && prevAllOptionsLength === flattenedSections.allOptions.length)
+                ? -1
+                : 0;
 
         // reseting the currrent page to 1 when the user types something
         setCurrentPage(1);