Fix selection list focus

src/components/SelectionList/BaseSelectionList.tsx

@@ -1,8 +1,8 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
-import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {ForwardedRef} from 'react';
-import {View} from 'react-native';
+import React, {forwardRef, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import type {LayoutChangeEvent, SectionList as RNSectionList, TextInput as RNTextInput, SectionListRenderItemInfo} from 'react-native';
+import {View} from 'react-native';
 import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager';
 import Button from '@components/Button';
 import Checkbox from '@components/Checkbox';
@@ -16,6 +16,7 @@ import TextInput from '@components/TextInput';
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import usePrevious from '@hooks/usePrevious';
 import useThemeStyles from '@hooks/useThemeStyles';
 import Log from '@libs/Log';
 import variables from '@styles/variables';
@@ -73,6 +74,41 @@ function BaseSelectionList<TItem extends User | RadioItem>(
     const [maxToRenderPerBatch, setMaxToRenderPerBatch] = useState(shouldUseDynamicMaxToRenderPerBatch ? 0 : CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
     const [isInitialSectionListRender, setIsInitialSectionListRender] = useState(true);
 
+    /**
+     * Sorts sections in the list based on the selection status and whether items are disabled.
+     * Disabled items are moved to the top, followed by selected items, and then unselected items.
+     */
+    const sortedSections = useMemo(() => {
+        // If multiple selection is not allowed, return the original list
+        if (!canSelectMultiple) {
+            return sections;
+        }
+
+        return sections.map((section) => {
+            const disabledItems: TItem[] = [];
+            const selectedItems: TItem[] = [];
+            const unselectedItems: TItem[] = [];
+
+            section.data.forEach((item) => {
+                if (item.isDisabled) {
+                    disabledItems.push(item);
+                } else if (item.isSelected) {
+                    selectedItems.push(item);
+                } else {
+                    unselectedItems.push(item);
+                }
+            });
+
+            // Combine items in the order: disabled, selected, unselected
+            const sortedData = [...disabledItems, ...selectedItems, ...unselectedItems];
+
+            return {
+                ...section,
+                data: sortedData,
+            };
+        });
+    }, [canSelectMultiple, sections]);
+
     /**
      * Iterates through the sections and items inside each section, and builds 3 arrays along the way:
      * - `allOptions`: Contains all the items in the list, flattened, regardless of section
@@ -91,7 +127,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
 
         const selectedOptions: TItem[] = [];
 
-        sections.forEach((section, sectionIndex) => {
+        sortedSections.forEach((section, sectionIndex) => {
             const sectionHeaderHeight = variables.optionsListSectionHeaderHeight;
             itemLayouts.push({length: sectionHeaderHeight, offset});
             offset += sectionHeaderHeight;
@@ -142,7 +178,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
             itemLayouts,
             allSelected: selectedOptions.length > 0 && selectedOptions.length === allOptions.length - disabledOptionsIndexes.length,
         };
-    }, [canSelectMultiple, sections]);
+    }, [canSelectMultiple, sortedSections]);
 
     // If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member
     const [focusedIndex, setFocusedIndex] = useState(() => flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey));
@@ -172,7 +208,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
             // Otherwise, it will cause an index-out-of-bounds error and crash the app.
             let adjustedSectionIndex = sectionIndex;
             for (let i = 0; i < sectionIndex; i++) {
-                if (sections[i].data) {
+                if (sortedSections[i].data) {
                     adjustedSectionIndex--;
                 }
             }
@@ -357,18 +393,36 @@ function BaseSelectionList<TItem extends User | RadioItem>(
         }, [shouldShowTextInput]),
     );
 
+    const prevTextInputValue = usePrevious(textInputValue);
     useEffect(() => {
-        // do not change focus on the first render, as it should focus on the selected item
-        if (isInitialSectionListRender) {
+        // do not change focus when the textInputValue is the same
+        if (prevTextInputValue === textInputValue) {
             return;
         }
-
         // set the focus on the first item when the sections list is changed
-        if (sections.length > 0) {
-            updateAndScrollToFocusedIndex(0);
+        if (flattenedSections.allOptions.length > 0) {
+            let newSelectedIndex;
+
+            if (textInputValue === '') {
+                // if the textInputValue is empty then focus is removed
+                newSelectedIndex = -1;
+            } else {
+                // if multiple selection then focus on the first non-selected item
+                // else focus on the first item
+                newSelectedIndex = canSelectMultiple ? flattenedSections.selectedOptions.length + flattenedSections.disabledOptionsIndexes.length : 0;
+            }
+
+            updateAndScrollToFocusedIndex(newSelectedIndex);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [sections]);
+    }, [
+        canSelectMultiple,
+        flattenedSections.allOptions.length,
+        flattenedSections.disabledOptionsIndexes.length,
+        flattenedSections.selectedOptions.length,
+        textInputValue,
+        updateAndScrollToFocusedIndex,
+    ]);
 
     /** Selects row when pressing Enter */
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
@@ -459,7 +513,7 @@ function BaseSelectionList<TItem extends User | RadioItem>(
                                 )}
                                 <SectionList
                                     ref={listRef}
-                                    sections={sections}
+                                    sections={sortedSections}
                                     stickySectionHeadersEnabled={false}
                                     renderSectionHeader={renderSectionHeader}
                                     renderItem={renderItem}