[$250] Refactor Navigation code in SelectionList component

[MonilBhavsar]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Coming from #90869 (comment).
We do have some code/logic that is duplicated across two components - src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx and src/components/SelectionList/BaseSelectionList.tsx.

Version Number:
Reproducible in staging?:
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation (hyperlinked to channel name): https://expensify.slack.com/archives/C01GTK53T8Q/p1779128420498029

Action Performed:

Break down in numbered steps

Expected Result:

Describe what you think should've happened

Actual Result:

Describe what actually happened

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Select the officially supported platforms where the issue was reproduced:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @TaduJR

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022056616887744527930
• Upwork Job ID: 2056616887744527930
• Last Price Increase: 2026-05-19

[TaduJR]

👋

[MelvinBot]

Proposal

What is the root cause of that problem?

BaseSelectionListWithSections.tsx is essentially a copy of BaseSelectionList.tsx adapted for sectioned data. ~80% of the logic is duplicated verbatim across both files: state/refs, keyboard navigation, keyboard shortcuts, focus management, scroll handling, row selection, text input rendering, and the FlashList/Footer JSX structure. The only fundamental difference is that the sections variant flattens Section[] via useFlattenedSections and handles section headers in renderItem.

What changes do you think we should make in order to solve the problem?

Extract the shared logic into 3-4 custom hooks that both components consume:

1. useSelectionListKeyboardNav — setHasKeyBeenPressed, Tab key listener, scrollToIndex/debounced variant, useArrowKeyFocusManager config, setFocusedIndexFromRowFocus, and all associated refs (hasKeyBeenPressed, suppressNextFocusScrollRef, isKeyboardNavigating). Returns the navigation state and handlers both components need.

2. useSelectionListShortcuts — disableEnterShortcut expression, ENTER shortcut, CTRL+ENTER shortcut, and textInputKeyPress handler. Takes selectFocusedItem, confirmButtonOptions, focus state, and config flags.

3. useSelectionListRowSelect — selectRow and selectFocusedItem/selectFocusedOption logic, parameterized with a config object to handle the minor behavioral differences (e.g., sections variant calls scrollToIndex(0) on multi-select; base variant has isSmallScreenWidth/onSelectionButtonPress logic).

4. useSelectionListTextInput (optional) — innerTextInputRef, isTextInputFocusedRef, focusTextInput, and the textInputComponent render function.

After extraction, each component would only contain its unique concerns: BaseSelectionList handles flat data with highlighting/select-all; BaseSelectionListWithSections handles section flattening and section header rendering.

Full duplication inventory (21 instances)

#	Duplicated Logic	Sections Lines	Base Lines
1	Hooks/state init (styles, isFocused, scrollEnabled, etc.)	88-101	101-107
2	Refs (textInput, keyboard, scroll suppression)	92-97	109-116
3	setHasKeyBeenPressed callback	106-112	159-165
4	Tab key down listener effect	116-126	168-181
5	scrollToIndex function	128-144	183-202
6	useArrowKeyFocusManager call	148-170	206-228
7	setFocusedIndexFromRowFocus	181-187	231-239
8	selectRow function	200-221	246-287
9	selectFocusedItem/selectFocusedOption	223-229	300-305
10	ENTER / CTRL+ENTER shortcuts	270-294	308-331
11	textInputKeyPress handler	296-302	332-341
12	useSelectedItemFocusSync call	304-311	539-546
13	useSearchFocusSync call	317-329	552-563
14	textInputComponent rendering	331-351	347-368
15	renderListEmptyContent	353-364	418-437
16	Container View + FlashList + Footer JSX	423-467	601-647

What alternative solutions did you explore? (Optional)

An alternative would be to unify both components into a single BaseSelectionList that accepts an optional sections prop and internally flattens when sections are provided. This would eliminate the second file entirely but would increase the complexity of the single component and make it harder to reason about. The hooks-based approach keeps the two components focused on their unique rendering concerns while eliminating all behavioral duplication.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Current assignee @mkhutornyi is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~022056616887744527930