From fe37ab7fef491eedcc7295aa015cbec1d14bac03 Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Thu, 26 Oct 2023 13:31:59 +0300
Subject: [PATCH 1/2] Focus on the first item of the selection listwhen user
 changes the search input

---
 src/components/SelectionList/BaseSelectionList.js | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index fdb1f92ca73b..68f3aa5f27f7 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {View} from 'react-native';
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
@@ -335,6 +335,18 @@ function BaseSelectionList({
         }, [shouldShowTextInput]),
     );
 
+    useEffect(() => {
+        //do not change focus on the first render, as it should focus on the selected item
+        if (firstLayoutRef.current) {
+            return;
+        }
+
+        // set the focus on the first item when the sections list is changed
+        if (sections.length > 0) {
+            updateAndScrollToFocusedIndex(0);
+        }
+    }, [sections]);
+
     /** Selects row when pressing Enter */
     useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
         captureOnInputs: true,

From 61be4336aaee608960dad01d700df4f6129aa4af Mon Sep 17 00:00:00 2001
From: Abdelrahman Khattab <abzokhattab@gmail.com>
Date: Thu, 26 Oct 2023 16:21:36 +0300
Subject: [PATCH 2/2] Eslint fix

---
 src/components/SelectionList/BaseSelectionList.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/SelectionList/BaseSelectionList.js b/src/components/SelectionList/BaseSelectionList.js
index 68f3aa5f27f7..0ecebd2f878a 100644
--- a/src/components/SelectionList/BaseSelectionList.js
+++ b/src/components/SelectionList/BaseSelectionList.js
@@ -336,7 +336,7 @@ function BaseSelectionList({
     );
 
     useEffect(() => {
-        //do not change focus on the first render, as it should focus on the selected item
+        // do not change focus on the first render, as it should focus on the selected item
         if (firstLayoutRef.current) {
             return;
         }
@@ -345,6 +345,7 @@ function BaseSelectionList({
         if (sections.length > 0) {
             updateAndScrollToFocusedIndex(0);
         }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sections]);
 
     /** Selects row when pressing Enter */