Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
MonilBhavsar merged 3 commits into from
Oct 31, 2023
Merged

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

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fe37ab7
Focus on the first item of the selection listwhen user changes the se…
abzokhattab Oct 26, 2023
61be433
Eslint fix
abzokhattab Oct 26, 2023
73847d6
Merge remote-tracking branch 'origin' into focus-on-first-option-when…
abzokhattab Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 14 additions & 1 deletion src/components/SelectionList/BaseSelectionList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -338,6 +338,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,
Expand Down