Move pre-selected option to top in shared SelectionScreen (accounting selectors) by marufsharifi · Pull Request #101719 · Expensify/App

marufsharifi · 2026-09-21T10:07:19Z

Explanation of Change

Part of the "move pre-selected list items to top" work

This PR adds the "pin the pre-selected item to the top" behavior directly in the shared SelectionScreen component, so every selector built on it gets the behavior from a single place instead of editing each page individually.

Fixed Issues

$ #69184
PROPOSAL: #69184 (comment)

Tests

These steps verify it on the QuickBooks Online → Advanced → foreign-currency expense account selector (the reachable QBO one), but the same behavior applies to all ~24 searchable accounting selectors since they share this code path.

**Setup (DevTools console)** — unlocks the FX selector and seeds a long, pre-selected list

const policyID = 'PASTE_POLICY_ID'; // from any /workspaces/<policyID>/... URL

// 1) Enable the beta that surfaces the FX expense-account selector (keeps existing betas)
const betas = (await window.Onyx.get('betas')) ?? [];
await window.Onyx.set('betas', Array.from(new Set([...betas, 'globalReimbursementFX'])));

// 2) Satisfy the other gates + seed 15 expense accounts + pre-select a mid-list one
const expenseAccounts = Array.from({length: 15}, (_, i) => {
  const n = String(i + 1).padStart(2, '0');
  return {id: `test-exp-${n}`, name: `Test Expense Account ${n}`, currency: 'USD'};
});
await window.Onyx.merge(`policy_${policyID}`, {
  reimbursementChoice: 'reimburseYes',
  achAccount: {bankAccountID: 123456},
  connections: {quickbooksOnline: {data: {expenseAccounts}, config: {fxExpenseAccount: 'test-exp-10'}}},
});

(Run this right before testing and stay in the app — a server reconnect can overwrite these optimistic values.)

Go to Workspace → Accounting → QuickBooks Online → Advanced.
Open the foreign-currency expense account row.
Verify: a search box is shown, and "Test Expense Account 10" (the pre-selected account) is pinned at the top of the list — not at its natural 10th position, and the list is not opened scrolled to the middle.
Type Test in the search box to filter the list, then clear the search.
Verify: "Test Expense Account 10" is still at the top and did not slip below the fold after clearing.

Verify that no errors appear in the JS console

Offline tests

Same as Test

QA Steps

// TODO: These must be filled out, or the issue title must include "[No QA]."
Same as Test

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

checklist.mov

Android: mWeb Chrome

iOS: Native

checklist.mov

iOS: mWeb Safari

MacOS: Chrome / Safari

check.list.mov

…d clarify default key matching

… and update related tests

codecov · 2026-10-01T05:58:39Z

Codecov Report

✅ Changes either increased or maintained existing code coverage, great job!

Files with missing lines	Coverage Δ
src/components/SelectionScreen.tsx	`100.00% <100.00%> (+100.00%)`	⬆️
src/hooks/useSelectionListSearch.ts	`100.00% <100.00%> (ø)`
src/libs/ListUtils.tsx	`100.00% <100.00%> (ø)`
src/libs/SelectionListOrderUtils.ts	`100.00% <ø> (ø)`
.../export/CampfireCardProgramAccountSelectorPage.tsx	`0.00% <0.00%> (ø)`
...export/DualEntryCardProgramAccountSelectorPage.tsx	`0.00% <0.00%> (ø)`
...rillet/export/RilletCardProgramAccountSelector.tsx	`0.00% <0.00%> (ø)`
.../export/BusinessCentralPaymentMethodSelectPage.tsx	`0.00% <0.00%> (ø)`
...re/export/CampfireDefaultCompanyCardVendorPage.tsx	`0.00% <0.00%> (ø)`
...y/export/DualEntryDefaultCompanyCardVendorPage.tsx	`0.00% <0.00%> (ø)`
... and 2 more
... and 10 files with indirect coverage changes

melvin-bot · 2026-10-01T06:06:00Z

@linhvovan29546 Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

JmillsExpensify

No product review required on this one.

marufsharifi · 2026-10-02T06:37:21Z

@linhvovan29546 Could you please check this if it is a bug and should I fix it:

Go to Workspace → Accounting → QuickBooks Online → Advanced.
Open QuickBooks Online currency conversion fallback account.
Make sure Test Expense Account 10 is the originally selected account and is pinned at the top.
Search for Test Expense Account 05.
Select Test Expense Account 05.
Clear the search field.
Observe the list position.

After clearing the search, the list automatically scrolls toward the new selected item (Test Expense Account 05).

screenrecord.mov

marufsharifi · 2026-10-05T05:31:38Z

@linhvovan29546, Gentle bump. thanks.

linhvovan29546 · 2026-10-05T07:01:06Z

Could you please check this if it is a bug and should I fix it:

I don’t think this is the bug.

linhvovan29546 · 2026-10-05T07:02:23Z

@MelvinBot Review

MelvinBot · 2026-10-05T07:06:55Z

Code review

The approach looks right: pinning before filtering in useSelectionListSearch covers about 40 selectors in one place. I found one behavior issue and a few cleanups. CI is green apart from the checklist and approval jobs.

1. Multi-select pages pin only the first pre-selected item. useSelectionListSearch.ts:20 uses data.find(...), so only one value is saved. MergeATSFilterSelectionPage.tsx:67 is a canSelectMultiple list that uses this hook. With 12 or more stages and 3 pre-selected, only the first moves to the top. The other two stay in place. Shared MultiSelect pins every initial selection. Suggested fix:

const initialSelectedValues = useInitialValue(() => data.filter((item) => item.isSelected).map((item) => item.value));
const orderedData = moveInitialSelectionToTop(data, initialSelectedValues);

This also uses the existing useInitialValue hook instead of a raw useState. SingleSelect and MultiSelect already use it.

2. getKey is never used. No caller passes the new third argument to moveInitialSelectionToTop. Please revert the signature and doc change unless a caller needs it. The test comment at SelectionScreenTest.tsx:48 says the tests prove matching on keyForList, but no test checks that. Please remove that comment.

3. Small fix to the comment at SelectionScreen.tsx:150. Change "This Only" to "This only." The comment should also say why mount-scroll is off: the pinned row is already at the top.

Checked and fine:

Accounting pages load connection data before they render, through withPolicyConnections. The selection is present on the first render.
Every SelectionScreen that passes textInputOptions now pins upstream. The Xero contact page and the company card export page both pin it themselves.
Disabling mount-scroll for searchable lists matches the other pinned pages, such as CountrySelectionList and AssigneeStep.
I agree the scroll-to-new-selection after clearing search is not a bug.

view run

linhvovan29546 · 2026-10-05T06:52:00Z

    const shouldShowTextInput = supplierOptions.length >= CONST.STANDARD_LIST_ITEM_LIMIT;

+    // Pin the selected supplier to the top of the full list before filtering, so it stays pinned while searching.
+    const orderedSupplierOptions = useMemo(() => moveInitialSelectionToTop(supplierOptions, currentContactID ? [currentContactID] : []), [supplierOptions, currentContactID]);


Please remove useMemo. The DynamicXeroNonReimbursableDefaultContactSelectPage page has been automatically memoized by the React Compiler.

…d items at the top and update related tests

linhvovan29546 · 2026-10-05T10:38:56Z

-    const [searchValue, setSearchValue, filteredData] = useSearchResults(data, (item, searchInput) => tokenizedSearch([item], searchInput, () => [item.text ?? '', item.value]).length > 0);
+    // Freeze the items selected when the list opened so they stay pinned while staged selections change and the search
+    // filters the list. All pre-selected values are kept so multi-select lists pin every one, not just the first.
+    const initialSelectedValues = useInitialValue(() => data.filter((item) => item.isSelected).map((item) => item.value));


Why don’t we use useInitialSelection?

@linhvovan29546 useInitialSelection always calls useFocusEffect internally, which would add a navigation-context dependency to this shared hook (used by ~40 selectors) and break its renderHook unit test. We also don't want its resetOnFocus behavior here: the hook only sees the live isSelected, so re-snapshotting on focus would re-pin the staged selection — the exact jump we're preventing. Without resetOnFocus it's just useInitialValue with extra weight, so useInitialValue (which SingleSelect/MultiSelect already use) is the lighter, correct fit — freeze once at mount.

marufsharifi · 2026-10-06T14:02:35Z

@robertjchen, could you please feel free to review the code, but hold off on merging for now? I’m doing another round of testing. Thanks!

…main

marufsharifi · 2026-10-16T05:31:05Z

@linhvovan29546, could you please take another look, this is done from my side. thanks.

…kbooks tests

robertjchen

LGTM, thanks!

github-actions · 2026-10-20T01:19:44Z

🚧 robertjchen has triggered a test Expensify/App build. You can view the workflow run here.

OSBotify · 2026-10-20T01:23:57Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2026-10-20T01:24:09Z

🧪🧪 Use the links below to test this adhoc build on Android, iOS, and Web. Happy testing! 🧪🧪
Built from App PR #101719.

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-45d395e-977e6a4-8432315c184aa40b79267d0ca033a50f991cd4b1/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-45d395e-977e6a4-45e51cb95c563f8e99b6436f5fd094828baf4389/index.html

Web 🕸️
https://101719.pr-testing.expensify.com

👀 View the workflow run that generated this build 👀

OSBotify · 2026-10-20T19:40:27Z

🚀 Deployed to staging by https://github.com/robertjchen in version: 9.5.15-1 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

MelvinBot · 2026-10-20T19:45:56Z

No help site update needed. This PR only changes list order, so the pre-selected option now appears at the top of long, searchable accounting selectors. No article under docs/articles describes the order of these lists, so no sentence is now wrong.

view run

OSBotify · 2026-10-21T19:29:26Z

🚀 Deployed to production by https://github.com/grgia in version: 9.5.15-3 🚀

platform	result
🕸 web 🕸	success ✅
🤖 android 🤖	success ✅
🍎 iOS 🍎	success ✅

Bundle Size Analysis (Sentry):

Android
iOS

Pin pre-selected option to top in SelectionScreen (shared)

d34e27c

melvin-bot Bot assigned marufsharifi Sep 21, 2026

marufsharifi added 5 commits September 28, 2026 09:07

Merge branch 'main' into fix/selection-screen-shared-pin

7466132

Refactor moveInitialSelectionToTop function to improve type safety an…

80ab58c

…d clarify default key matching

Merge branch 'main' into fix/selection-screen-shared-pin

2ee0a45

Merge branch 'main' into fix/selection-screen-shared-pin

591d5f7

Refactor selection handling to pin selected items in searchable lists…

67a91a1

… and update related tests

marufsharifi marked this pull request as ready for review October 1, 2026 06:05

marufsharifi requested review from a team as code owners October 1, 2026 06:05

melvin-bot Bot requested review from JmillsExpensify and linhvovan29546 and removed request for a team October 1, 2026 06:05

melvin-bot Bot removed the request for review from a team October 1, 2026 06:06

github-actions Bot reviewed Oct 1, 2026

View reviewed changes

Comment thread src/components/SelectionScreen.tsx Resolved

fix comment

61dccbf

JmillsExpensify reviewed Oct 1, 2026

View reviewed changes

Merge branch 'main' into fix/selection-screen-shared-pin

7463716

linhvovan29546 suggested changes Oct 5, 2026

View reviewed changes

marufsharifi added 3 commits October 5, 2026 12:05

Merge branch 'main' into fix/selection-screen-shared-pin

455c5d0

Enhance selection handling in searchable lists to pin all pre-selecte…

06df8d9

…d items at the top and update related tests

remove unnecessary useMemo

6628d97

linhvovan29546 suggested changes Oct 5, 2026

View reviewed changes

robertjchen previously approved these changes Oct 6, 2026

View reviewed changes

marufsharifi added 2 commits October 7, 2026 09:40

Merge branch 'main' into fix/selection-screen-shared-pin

136b39d

Freeze pin anchor on the Xero default vendor page

3cfdf99

marufsharifi dismissed robertjchen’s stale review via 3cfdf99 October 7, 2026 09:08

marufsharifi added 7 commits October 7, 2026 17:13

Keep selected account above the default on card program selectors

34750fa

Show None below the pinned vendor on the Xero default vendor page

afbe57d

Merge branch 'main' into fix/selection-screen-shared-pin

3646a8f

Fix clear-row ordering and short-list pinning on vendor pickers

c435476

Merge branch 'main' into fix/selection-screen-shared-pin

ea4eead

fix: drop trailing separator when search leaves only the default account

936e234

Restore isDeployChecklistLocked and proposalPoliceComment bundles to …

b203cfe

…main

Merge branch 'main' into fix/selection-screen-shared-pin

3e83ef8

linhvovan29546 suggested changes Oct 19, 2026

View reviewed changes

Comment thread src/pages/workspace/accounting/campfire/export/CampfireDefaultCompanyCardVendorPage.tsx Resolved

marufsharifi added 3 commits October 19, 2026 14:25

Merge branch 'main' into fix/selection-screen-shared-pin

b06a327

Expose pinnedValues from useSelectionListSearch for one source of truth

31b43a5

add pinnedValues mock to useSelectionListSearch in Certinia and Quic…

35d19ae

…kbooks tests

linhvovan29546 approved these changes Oct 19, 2026

View reviewed changes

melvin-bot Bot requested a review from robertjchen October 19, 2026 14:31

robertjchen approved these changes Oct 20, 2026

View reviewed changes

robertjchen merged commit 45d395e into Expensify:main Oct 20, 2026
36 of 39 checks passed

OSBotify mentioned this pull request Oct 20, 2026

Deploy Checklist: New Expensify 2026-10-20 #104495

Closed

81 tasks done

melvin-bot Bot mentioned this pull request Oct 21, 2026

Move pre-selected list items to top of list throughout the app #69184

Open

5 of 8 tasks

Conversation

marufsharifi commented Sep 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Explanation of Change

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

codecov Bot commented Oct 1, 2026 • edited by github-actions Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

melvin-bot Bot commented Oct 1, 2026

Uh oh!

Uh oh!

JmillsExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

marufsharifi commented Oct 2, 2026

Uh oh!

marufsharifi commented Oct 5, 2026

Uh oh!

linhvovan29546 commented Oct 5, 2026

Uh oh!

linhvovan29546 commented Oct 5, 2026

Uh oh!

MelvinBot commented Oct 5, 2026

Code review

Uh oh!

linhvovan29546 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

linhvovan29546 Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

marufsharifi Oct 5, 2026

Choose a reason for hiding this comment

Uh oh!

marufsharifi commented Oct 6, 2026

Uh oh!

marufsharifi commented Oct 16, 2026

Uh oh!

Uh oh!

robertjchen left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Oct 20, 2026

Uh oh!

OSBotify commented Oct 20, 2026

Uh oh!

github-actions Bot commented Oct 20, 2026

Uh oh!

OSBotify commented Oct 20, 2026

Uh oh!

MelvinBot commented Oct 20, 2026

Uh oh!

OSBotify commented Oct 21, 2026

Uh oh!

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

marufsharifi commented Sep 21, 2026 •

edited

Loading

codecov Bot commented Oct 1, 2026 •

edited by github-actions Bot

Loading