Fix selection list focus

src/components/SelectionList/BaseSelectionList.js

@@ -17,6 +17,7 @@ import withKeyboardState, {keyboardStatePropTypes} from '@components/withKeyboar
 import useActiveElementRole from '@hooks/useActiveElementRole';
 import useKeyboardShortcut from '@hooks/useKeyboardShortcut';
 import useLocalize from '@hooks/useLocalize';
+import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -366,18 +367,37 @@ function BaseSelectionList({
         }, [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);
+            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.disabledOptionsIndexes.length,
+        flattenedSections.selectedOptions.length,
+        isInitialSectionListRender,
+        prevTextInputValue,
+        sections,
+        textInputValue,
+        updateAndScrollToFocusedIndex,
+    ]);
 
     /** Selects row when pressing Enter */
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
@@ -394,6 +414,35 @@ function BaseSelectionList({
         isActive: !disableKeyboardShortcuts && Boolean(onConfirm) && isFocused,
     });
 
+    const sortedSections = useMemo(() => {
+        // If multiple selection is not allowed, return the original list
+        if (!canSelectMultiple) {
+            return sections;
+        }
+
+        return _.map(sections, (section) => {
+            const disabledItems = [];
+            const selectedItems = [];
+            const unselectedItems = [];
+
+            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,
+            };
+        });
+    }, [sections, canSelectMultiple]);
+
     return (
         <ArrowKeyFocusManager
             disabledIndexes={flattenedSections.disabledOptionsIndexes}
@@ -465,7 +514,7 @@ function BaseSelectionList({
                                 )}
                                 <SectionList
                                     ref={listRef}
-                                    sections={sections}
+                                    sections={sortedSections}
                                     stickySectionHeadersEnabled={false}
                                     renderSectionHeader={renderSectionHeader}
                                     renderItem={renderItem}