[Due for payment 2026-03-30] Reports - Keyboard navigation does not work at the first/last item of Column list

[jponikarchuk]

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

---

Version Number: 9.3.40-0
Reproducible in staging?: Yes
Reproducible in production?: N/A - new feature, doesn't exist in prod
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #78869
Email or phone of affected tester (no customers): sjodinjsonjinodisjniod@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Mac 26.2 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to Reports > Expenses.
3. Click Columns.
4. Press Up arrow key.
5. Press Down arrow key until the last item in the list.
6. Press Down arrow key again.

Expected Result:

• Pressing Up arrow key at the top of the list will focus on the last item in the list.
• Pressing Down arrow key at the last item of the list will focus on the first item in the list.

Actual Result:

• Pressing Up arrow key at the top of the list does not navigate.
• Pressing Down arrow key at the last item of the list does not navigate.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @aimane-chnaif

[melvin-bot]

You have been assigned to this deploy blocker because you recently merged this PR: #78869

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[OSBotify]

🔍 Investigation Summary

Classification: Frontend bug
Causing PR: #78869 - "fix: Arrow key navigation not working in Columns selection" by @TaduJR (High confidence)
Related Issues: None

Recommendation: REVERT

The PR should be reverted. It intentionally disabled cyclic keyboard navigation, but the expected behavior is that arrow keys should wrap around at list boundaries.

Labels: No changes needed. DeployBlockerCash is correctly applied (frontend bug in App repository).

📋 Detailed Analysis

Evidence

1. Timing: PR fix: Arrow key navigation not working in Columns selection #78869 was merged on 2026-03-17 and is included in staging version 9.3.40-0 where the bug appears
2. Direct code match: The bug symptoms (no wrap-around navigation) exactly match the implementation in the PR
3. Intentional design choice: In src/hooks/useListKeyboardNav.ts line 44, the PR sets disableCyclicTraversal: true

Verification

Files affected by the bug:

• /home/runner/_work/App/App/src/components/ColumnsSettingsList.tsx - The Columns settings UI where the bug manifests
• /home/runner/_work/App/App/src/hooks/useListKeyboardNav.ts - New hook added by the PR that controls keyboard navigation

Confirmed PR modifies these files:

• ✅ src/components/ColumnsSettingsList.tsx - Modified to integrate keyboard navigation
• ✅ src/hooks/useListKeyboardNav.ts - New file added by the PR
• ✅ src/hooks/useArrowKeyFocusManager.ts - Used by the new hook

Root Cause

The PR added keyboard navigation support to DraggableList/ColumnsSettingsList using a new useListKeyboardNav hook. This hook calls useArrowKeyFocusManager with disableCyclicTraversal: true (line 44 of useListKeyboardNav.ts).

When disableCyclicTraversal is true:

• Pressing Up arrow at the first item returns the current index (no-op) instead of wrapping to the last item
• Pressing Down arrow at the last item returns the current index (no-op) instead of wrapping to the first item

However, the expected behavior (per the bug report) is that navigation should wrap cyclically at both ends of the list. The PR implementation contradicts this expectation.

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

When using keyboard navigation (arrow keys) in the Columns settings dropdown (Search > Reports > Expenses > Columns), pressing the Up arrow at the top of the list does not cycle to the last item, and pressing the Down arrow at the last item does not cycle to the first item. The arrow keys simply stop working at the boundaries.

What is the root cause of that problem?

In src/hooks/useListKeyboardNav.ts, the hook passes disableCyclicTraversal: true to useArrowKeyFocusManager (line 44). This flag explicitly prevents wrapping at list boundaries:

• ArrowUp at index 0: useArrowKeyFocusManager sets nextIndex = -1 (instead of maxIndex), which triggers the disableCyclicTraversal guard and returns the current index unchanged — a no-op.
• ArrowDown at last index: nextIndex is set to maxIndex (instead of 0), so currentFocusedIndex stays at the same value — also a no-op.

The useArrowKeyFocusManager hook already supports cyclic traversal when disableCyclicTraversal is false (the default). The issue is that useListKeyboardNav explicitly opts out of it.

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

Remove the disableCyclicTraversal: true option from useListKeyboardNav.ts (line 44). Since false is the default value for disableCyclicTraversal in useArrowKeyFocusManager, simply removing this line will enable cyclic traversal — ArrowUp at the first item will wrap to the last, and ArrowDown at the last item will wrap to the first.

Additionally, add boundary test cases to tests/unit/useListKeyboardNavTest.ts to verify wrapping behavior (ArrowUp at index 0 should focus the last item, ArrowDown at the last index should focus the first item).

What alternative solutions did you explore? (Optional)

An alternative would be to make disableCyclicTraversal a configurable parameter on useListKeyboardNav so individual consumers can choose. However, since the issue specifically requests cyclic behavior and there's currently only one consumer (ColumnsSettingsList), the simpler fix of just removing the flag is preferred.

---

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.

[TaduJR]

I think this is expected.

WDYT @aimane-chnaif?

[aimane-chnaif]

I thought this is expected while testing. But now I see different behavior on SelectionList.