Stop workspace filter from scrolling and reordering on selection

src/components/SelectionList/BaseSelectionList.tsx

@@ -111,6 +111,7 @@ function BaseSelectionList<TItem extends ListItem>({
     const listRef = useRef<FlashListRef<TItem> | null>(null);
     const itemFocusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const keyboardListenerRef = useRef<ReturnType<typeof Keyboard.addListener> | null>(null);
+    const suppressNextFocusScrollRef = useRef(false);
 
     const initialFocusedIndex = useMemo(() => data.findIndex((i) => i.keyForList === initiallyFocusedItemKey), [data, initiallyFocusedItemKey]);
     const [itemsToHighlight, setItemsToHighlight] = useState<Set<string> | null>(null);
@@ -210,6 +211,10 @@ function BaseSelectionList<TItem extends ListItem>({
         disabledIndexes: dataDetails.disabledArrowKeyIndexes,
         isActive: isFocused,
         onFocusedIndexChange: (index: number) => {
+            if (suppressNextFocusScrollRef.current) {
+                suppressNextFocusScrollRef.current = false;
+                return;
+            }
             if (!shouldScrollToFocusedIndex) {
                 return;
             }
@@ -242,6 +247,9 @@ function BaseSelectionList<TItem extends ListItem>({
                 }
             }
             if (shouldUpdateFocusedIndex && typeof indexToFocus === 'number') {
+                if (indexToFocus !== focusedIndex) {
+                    suppressNextFocusScrollRef.current = true;
+                }
                 setFocusedIndex(indexToFocus);
             }
             onSelectRow(item);
@@ -254,6 +262,7 @@ function BaseSelectionList<TItem extends ListItem>({
             isFocused,
             canSelectMultiple,
             shouldUpdateFocusedIndex,
+            focusedIndex,
             onSelectRow,
             shouldShowTextInput,
             shouldClearInputOnSelect,
@@ -524,6 +533,10 @@ function BaseSelectionList<TItem extends ListItem>({
         setFocusedIndex,
     });
 
+    const suppressNextFocusScroll = useCallback(() => {
+        suppressNextFocusScrollRef.current = true;
+    }, []);
+
     useSearchFocusSync({
         searchValue: textInputOptions?.value,
         data,
@@ -533,6 +546,8 @@ function BaseSelectionList<TItem extends ListItem>({
         shouldUpdateFocusedIndex,
         scrollToIndex,
         setFocusedIndex,
+        focusedIndex,
+        suppressNextFocusScroll,
     });
 
     useEffect(() => {

src/hooks/useInitiallyFocusedKey.ts

@@ -0,0 +1,25 @@
+import {useEffect, useState} from 'react';
+
+/**
+ * Returns an initially focused key that is cleared after the first render cycle.
+ * This prevents FlashList from auto-scrolling when data changes cause the key
+ * to transition from "not found" to "found" (e.g., clearing a search).
+ *
+ * Note: We use setTimeout instead of requestAnimationFrame because FlashList has a bug
+ * where clearing the focused key via requestAnimationFrame causes the list to scroll
+ * to the end unexpectedly.
+ */
+function useInitiallyFocusedKey(computeKey: () => string | undefined): string | undefined {
+    const [initiallyFocusedKey, setInitiallyFocusedKey] = useState(computeKey);
+
+    useEffect(() => {
+        const id = setTimeout(() => {
+            setInitiallyFocusedKey(undefined);
+        });
+        return () => clearTimeout(id);
+    }, []);
+
+    return initiallyFocusedKey;
+}
+
+export default useInitiallyFocusedKey;

src/hooks/useWorkspaceList.ts

@@ -19,9 +19,19 @@ type UseWorkspaceListParams = {
     searchTerm: string;
     localeCompare: LocaleContextProps['localeCompare'];
     additionalFilter?: (policy: OnyxEntry<Policy>) => boolean;
+    shouldSortSelectedToTop?: boolean;
 };
 
-function useWorkspaceList({policies, currentUserLogin, selectedPolicyIDs, searchTerm, shouldShowPendingDeletePolicy, localeCompare, additionalFilter}: UseWorkspaceListParams) {
+function useWorkspaceList({
+    policies,
+    currentUserLogin,
+    selectedPolicyIDs,
+    searchTerm,
+    shouldShowPendingDeletePolicy,
+    localeCompare,
+    additionalFilter,
+    shouldSortSelectedToTop = true,
+}: UseWorkspaceListParams) {
     const icons = useMemoizedLazyExpensifyIcons(['FallbackWorkspaceAvatar']);
     const usersWorkspaces = useMemo(() => {
         if (!policies || isEmptyObject(policies)) {
@@ -56,10 +66,13 @@ function useWorkspaceList({policies, currentUserLogin, selectedPolicyIDs, search
 
     const filteredAndSortedUserWorkspaces = useMemo<WorkspaceListItem[]>(
         () =>
-            tokenizedSearch(usersWorkspaces, searchTerm, (policy) => [policy.text]).sort((policy1, policy2) =>
-                sortWorkspacesBySelected({policyID: policy1.policyID, name: policy1.text}, {policyID: policy2.policyID, name: policy2.text}, selectedPolicyIDs, localeCompare),
-            ),
-        [searchTerm, usersWorkspaces, selectedPolicyIDs, localeCompare],
+            tokenizedSearch(usersWorkspaces, searchTerm, (policy) => [policy.text]).sort((policy1, policy2) => {
+                if (shouldSortSelectedToTop) {
+                    return sortWorkspacesBySelected({policyID: policy1.policyID, name: policy1.text}, {policyID: policy2.policyID, name: policy2.text}, selectedPolicyIDs, localeCompare);
+                }
+                return localeCompare(policy1.text, policy2.text);
+            }),
+        [searchTerm, usersWorkspaces, selectedPolicyIDs, localeCompare, shouldSortSelectedToTop],
     );
 
     const sections = useMemo(() => {

src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersWorkspacePage.tsx

@@ -1,13 +1,13 @@
 import {emailSelector} from '@selectors/Session';
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import ScreenWrapper from '@components/ScreenWrapper';
 import SearchFilterPageFooterButtons from '@components/Search/SearchFilterPageFooterButtons';
 import SelectionList from '@components/SelectionList';
 import UserListItem from '@components/SelectionList/ListItem/UserListItem';
-import type {SelectionListHandle} from '@components/SelectionList/types';
 import useDebouncedState from '@hooks/useDebouncedState';
+import useInitiallyFocusedKey from '@hooks/useInitiallyFocusedKey';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
@@ -38,8 +38,6 @@ function SearchFiltersWorkspacePage() {
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
     const shouldShowLoadingIndicator = isLoadingApp && !isOffline;
-    const selectionListRef = useRef<SelectionListHandle<WorkspaceListItem>>(null);
-
     const [selectedOptions, setSelectedOptions] = useState<string[]>(() => (searchAdvancedFiltersForm?.policyID ? Array.from(searchAdvancedFiltersForm?.policyID) : []));
 
     const {data, shouldShowNoResultsFoundMessage, shouldShowSearchInput} = useWorkspaceList({
@@ -49,8 +47,11 @@ function SearchFiltersWorkspacePage() {
         selectedPolicyIDs: selectedOptions,
         searchTerm: debouncedSearchTerm,
         localeCompare,
+        shouldSortSelectedToTop: false,
     });
 
+    const initiallyFocusedKey = useInitiallyFocusedKey(() => data.find((item) => item.isSelected)?.keyForList);
+
     const selectWorkspace = useCallback(
         (option: WorkspaceListItem) => {
             const optionIndex = selectedOptions.findIndex((selectedOption: string) => {
@@ -60,10 +61,6 @@ function SearchFiltersWorkspacePage() {
 
             if (optionIndex === -1 && option?.policyID) {
                 setSelectedOptions([...selectedOptions, option.policyID]);
-
-                requestAnimationFrame(() => {
-                    selectionListRef.current?.scrollAndHighlightItem([option.keyForList]);
-                });
             } else {
                 const newSelectedOptions = [...selectedOptions.slice(0, optionIndex), ...selectedOptions.slice(optionIndex + 1)];
                 setSelectedOptions(newSelectedOptions);
@@ -114,12 +111,13 @@ function SearchFiltersWorkspacePage() {
                         />
                     ) : (
                         <SelectionList<WorkspaceListItem>
-                            ref={selectionListRef}
                             data={data}
                             ListItem={UserListItem}
+                            initiallyFocusedItemKey={initiallyFocusedKey}
                             onSelectRow={selectWorkspace}
                             textInputOptions={textInputOptions}
                             canSelectMultiple
+                            shouldUpdateFocusedIndex
                             shouldShowLoadingPlaceholder={isLoadingOnyxValue(policiesResult) || !didScreenTransitionEnd}
                             disableMaintainingScrollPosition
                             footerContent={