Merge pull request #30438 from abzokhattab/focus-on-first-option-when…

…-user-changes-the-search-input-in-selectionlist

Focus on the first item of the selection list when user changes the search input

src/components/SelectionList/BaseSelectionList.js

@@ -1,6 +1,6 @@
 import {useFocusEffect, useIsFocused} from '@react-navigation/native';
 import lodashGet from 'lodash/get';
-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 ArrowKeyFocusManager from '@components/ArrowKeyFocusManager';
@@ -339,6 +339,19 @@ 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);
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [sections]);
+
  /** Selects row when pressing Enter */
  useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
  captureOnInputs: true,