Fix elements hidden behind keyboard in landscape mode by GCyganek · Pull Request #102433 · Expensify/App

GCyganek · 2026-09-28T14:54:30Z

Explanation of Change

In landscape the header plus the open keyboard left no vertical room for the focused input. Five screens now wrap their header/top content in CollapsibleHeaderOnKeyboard and the combination of new CollapsibleHeaderOnKeyboardGroup/GroupMember so it collapses while the keyboard is open, and three selection lists move their footer into the list via useShouldFooterBeInsideList so the confirm button scrolls with the data instead of eating the remaining space.

Fixed Issues

$ #102082
$ #102047
$ #102122
$ #102120
$ #102119
$ #102899
PROPOSAL: N/A

Tests

1. Create expense

Launch app
Tap create expense
Turn to landscape
Try to focus on amount or merchant row
Verify Amount/merchant row is not hidden behind keypad in expense creation page

2. Spend screen

Launch app
Go to spend
Keep cursor on search box
Turn landscape
Note search box hidden behind keypad
Verify Search box is not hidden behind keypad in spend page.

3. Wallet

Launch app
Go to account - wallet
Tap add bank account
Tap get reimbursed/ make payment
Turn landscape
Try to focus on search bar in where's your bank account located
Verify Search input in where's your bank account located is not hidden behind keypad.

4. Workspace remove fixed distance

Launch app with commuterExclusions beta enabled
Go to workspace settings - distance rate - settings
Tap exclude commute - Remove fixed distance
Tap distance input
Turn landscape
Note distance input hidden behind keypad
Verify Remove fixed distance input is not hidden behind keypad.

5. Workspace additional approver

Launch app
Go to workspace settings
Add more than 20 members
Go to workflows - approver - edit
Tap additional approver
Turn landscape and focus on find a member row
Verify that in set approver page, member field is not hidden behind keypad.

6. Workspace company card edit name

Pre-condition: Keep font size to maximum

Launch app
Go to workspace settings
Create a commercial feed ( american express)
Open the feed settings
Turn to landscape and try to focus input
Verify Edit Card feed input is not hidden behind keypad in landscape mode.

Verify that no errors appear in the JS console

Offline tests

N/A

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

Screen.Recording.2026-09-29.at.14.33.54.mov

Screen.Recording.2026-09-29.at.14.34.22.mov

Screen.Recording.2026-09-29.at.14.34.44.mov

Screen.Recording.2026-09-29.at.14.36.24.mov

Screen.Recording.2026-09-29.at.14.37.26.mov

Screen.Recording.2026-10-08.at.11.37.36.mov

iOS: Native

Screen.Recording.2026-09-29.at.14.52.44.mov

Screen.Recording.2026-09-29.at.15.29.42.mov

Screen.Recording.2026-10-08.at.11.36.16.mov

…ion page

…den behind keypad

GCyganek · 2026-09-28T15:05:25Z

@Expensify/design here I'm fixing a few places where inputs are hidden behind keyboard in landscape mode. I want to ask which of these solutions are better in your opinion on Spend screen and when creating expense:

Collapsible header only:

Screen.Recording.2026-09-28.at.16.58.14.mov

Screen.Recording.2026-09-28.at.16.57.47.mov

Collapsible header and collapsible tab selector:

Screen.Recording.2026-09-28.at.16.59.19.mov

Screen.Recording.2026-09-28.at.17.02.03.mov

First option should give enough space and is the easiest one, the second one gives more space but the header and tab selector have separate collapsible containers as it's hard to have one in current setup as they are place in different places in the code and it may look weird

dubielzyk-expensify · 2026-09-29T03:01:16Z

2 obviously looks and feels better, but if we know it's not gonna be working reliably like that then option 1 feels okay. I very much prefer two though haha.

GCyganek · 2026-09-29T08:25:17Z

Second option it is then 👍

…ind-keyboard

codecov · 2026-09-29T10:59:10Z

Codecov Report

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

Files with missing lines	Coverage Δ
src/components/ApproverSelectionList.tsx	`96.00% <100.00%> (+0.16%)`	⬆️
...eyboard/CollapsibleHeaderOnKeyboardGroupContext.ts	`100.00% <100.00%> (ø)`
...lapsibleHeaderOnKeyboard/CollapsibleHeaderView.tsx	`100.00% <100.00%> (ø)`
...c/components/CollapsibleHeaderOnKeyboard/index.tsx	`0.00% <ø> (ø)`
...sibleHeaderOnKeyboard/useCollapsibleScreenState.ts	`100.00% <100.00%> (ø)`
...ibleHeaderOnKeyboard/useKeyboardCollapseMetrics.ts	`100.00% <100.00%> (ø)`
...RequestConfirmationList/ConfirmationListLayout.tsx	`100.00% <100.00%> (ø)`
...Search/SearchPageHeader/SearchPageHeaderNarrow.tsx	`85.71% <100.00%> (ø)`
src/pages/settings/Wallet/CountrySelectionList.tsx	`100.00% <100.00%> (ø)`
...ositAccount/InternationalDepositAccountContent.tsx	`0.00% <ø> (ø)`
... and 20 more
... and 9 files with indirect coverage changes

GCyganek · 2026-09-29T11:10:30Z

@codex please review

GCyganek · 2026-09-29T11:10:42Z

@MelvinBot review

MelvinBot · 2026-09-29T11:16:55Z

Review

The refactor looks correct. Moving the shared logic into useCollapsibleHeader + CollapsibleHeaderView keeps the single-header behavior the same, and I didn't find a blocking logic bug. Before merge, I'd fix the PR description and look at points 2–3.

The PR has no real test or QA steps. Tests and QA only say "no errors in the JS console", and every screenshot section is empty. That covers 5 issues and a new native-only component. Please add per-screen landscape steps: focus the input → header/tabs collapse → input stays visible → close keyboard → header restores. Also add videos. The checklist says unit tests were added, but none cover Group/GroupMember, and Codecov shows coverage dropped.
Commuter exclusions: the in-list Save button picks up offline pending opacity. With the keyboard open in landscape, the footer moves into the list inside OfflineWithFeedback (PolicyCommuterExclusionsPage.tsx:255-272). When a commuterExclusions update is pending offline, needsOpacity (OfflineWithFeedback.tsx:99) dims the button. Outside the list it isn't dimmed. It's minor, but the button now looks different depending on keyboard state.
A group member drops its height on unmount but never re-adds it. The effect in GroupMember/index.native.tsx:30 calls unregisterMember whenever the group value changes. Only onLayout adds a height back, and in landscape it skips unchanged heights. Today this works only because React Compiler keeps the context value stable. If the compiler ever bails on Group, the members' heights silently drop to 0 after any Group re-render, and the header stops collapsing. Two safer options:
- Depend on group?.unregisterMember only.
- Re-report the last measured height in the effect body.

Nits

Group/index.native.tsx:79 repeats almost all of the keyboard-threshold reaction in index.native.tsx:46, plus the window, focus, and landscape shared values. Consider one shared hook that returns "available height above the keyboard", so the two can't drift apart.
SUBHEADER_HEIGHT in InternationalDepositAccountContent.tsx:79 assumes every step has a textHeadlineLineHeightXXL title with mb6. BankAccountDetails uses mb3 for its currency header, and Confirmation has a two-line header. A short comment on why an approximate value is fine would help.
The refactor removed two useful comments: "Uses height animation (not translateY) so the freed space is reclaimed…" and the tab-bar example for collapsibleHeaderOffset.

I didn't run the app. These changes are native-only, so the web build renders Group/GroupMember as pass-throughs.

…oard open

GCyganek · 2026-09-29T11:50:53Z

@MelvinBot please review bro

MelvinBot · 2026-09-29T11:55:10Z

Follow-up review (up to `85975e0`)

The new commits fix 3 of my 4 earlier points, and I found no new bugs. The only earlier point still open is the commuter exclusions Save button, which is minor.

Fixed:

Test steps: the PR description now has landscape steps for all 5 screens.
Member heights: GroupMember now re-adds its last height after cleanup (GroupMember/index.native.tsx:155-158), so it no longer depends on React Compiler.
Duplicated logic: getKeyboardCollapseState, getAvailableHeightForCollapsibleContent, useCollapsibleScreenState, and useKeyboardCollapseMetrics now hold the shared logic. The single header and the group can no longer drift apart.
Offset guess: the hard-coded SUBHEADER_HEIGHT is gone. The Wallet step titles are now group members, so their real heights are measured. The removed comments are back too.

Still open (minor):

Commuter exclusions: with the keyboard open in landscape, the Save button still moves inside OfflineWithFeedback (PolicyCommuterExclusionsPage.tsx:255-272). If an update is pending offline, the button is dimmed there but not elsewhere. If that's acceptable, a short reply here is enough.

Nits

The Wallet test step only covers the country selection step. The new group members on the bank information, account holder, account type, and account details steps have no test step. One extra step would cover them, for example: focus a field on the bank information step → the header and step title collapse.
The Confirmation step has no text input, so wrapping its title in a GroupMember (Confirmation.tsx) does nothing. It's harmless, so keep it if you want every step to look the same.
CountrySelectionList is also used in BankAccountPurposePage outside any group. There the GroupMember never collapses, which matches the old behavior. Just confirming that's intended.

I didn't run the app. These changes only affect native, and the web build renders Group/GroupMember as pass-throughs.

melvin-bot · 2026-09-29T13:30:51Z

@truph01 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]

truph01 · 2026-10-12T10:28:05Z

                        shouldUpdateFocusedIndex
                        alternateNumberOfSupportedLines={2}
                        disableKeyboardShortcuts
+                        listFooterContent={shouldFooterBeInsideList ? footer : undefined}


Use footerContent + shouldFooterBeInsideList here too?

The other lists in this PR pass footerContent with shouldFooterBeInsideList. Would it make sense to do the same here and drop the listFooterContent / !shouldFooterBeInsideList && footer toggle?

using footerContent + shouldFooterBeInsideList would change the layout in portrait mode -> SelectionList is wrapped in OfflineWithFeedback, so the errors would be displayed below the button instead of between the list and the button

truph01 · 2026-10-12T10:43:52Z

-            <View style={styles.ph5}>
-                <Text style={[styles.textHeadlineLineHeightXXL, styles.mb6]}>{translate('addPersonalBankAccount.countrySelectionStepHeader')}</Text>
-            </View>
+            <CollapsibleHeaderOnKeyboardGroupMember>


BankAccountPurposePage and CollectDepositAccount also render this list without a CollapsibleHeaderOnKeyboardGroup, so the header never collapses there.

added, thanks!

truph01 · 2026-10-12T10:44:43Z

@codex review

chatgpt-codex-connector · 2026-10-12T10:45:06Z

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review	Status	Commit	Review trigger
📝 Code Review	✅ Completed 2026-10-12T11:12:53.114433Z	`e3adf74`	Manual request

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

chatgpt-codex-connector · 2026-10-12T11:12:50Z

Codex Review: Didn't find any major issues. Keep them coming!

Reviewed commit: e3adf74f68

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

…ind-keyboard

GCyganek · 2026-10-12T11:52:37Z

I see github actions are currently failing due to Setup node step failure caused by something not added on this PR

truph01 · 2026-10-12T12:05:20Z

@GCyganek Could you merge main? The failing checks should be fixed now

…ind-keyboard

melvin-bot · 2026-10-12T12:27:09Z

We did not find an internal engineer to review this PR, trying to assign a random engineer to #102082 as well as to this PR... Please reach out for help on Slack if no one gets assigned!

github-actions · 2026-10-12T14:58:07Z

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

OSBotify · 2026-10-12T14:58:14Z

✋ 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-12T15:02:33Z

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

Android 🤖	iOS 🍎
https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-android-Adhoc-06ca186-8b0d0a2-4e1e3b829d7af9161d2065afd39f39a416d1f4d6/index.html	https://ad-hoc-expensify-cash.s3.us-east-1.amazonaws.com/rock-artifacts/ad-hoc/rock-ios-device-AdHoc-06ca186-8b0d0a2-6bc40baf3cfe4d05d78ba337eebb0746cc96a75d/index.html

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

👀 View the workflow run that generated this build 👀

OSBotify · 2026-10-13T10:18:28Z

🚀 Deployed to staging by https://github.com/NicolasBonet in version: 9.5.8-0 🚀

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

MelvinBot · 2026-10-13T10:19:52Z

⚠️ A setup step failed before I could start. This is usually a temporary issue — try again in a few minutes, and if it persists post in #melvinbot-ai.

Run details

OSBotify · 2026-10-14T12:57:58Z

🚀 Deployed to production by https://github.com/cristipaval in version: 9.5.8-5 🚀

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

Bundle Size Analysis (Sentry):

Android
iOS

GCyganek added 5 commits September 28, 2026 15:28

Fix Workspace-In set approver page, member field hidden behind keypad

3eef060

Fix Expense-Amount/merchant row hidden behind keypad in expense creat…

0d49a7b

…ion page

Fix Wallet - Search input in where's your bank account located is hid…

4f48d7f

…den behind keypad

Fix Spend-Search box is hidden behind keypad in spend page

e1ab3ca

Fix Workspace-Remove fixed distance input hidden behind keypad

ea8c1d3

melvin-bot Bot assigned GCyganek Sep 28, 2026

GCyganek added 4 commits September 29, 2026 10:49

Fix tests

307aaef

add CollapsibleHeaderOnKeyboardGroupContext, use in IOURequestStartPage

db8c53f

Merge branch 'main' into @GCyganek/landscape-mode/elements-hidden-beh…

036f4d6

…ind-keyboard

Fix knip

0c11e1e

Use Group and GroupMember on Spend page

a3c83e8

GCyganek added 3 commits September 29, 2026 13:30

ApproverSelectionList move footer to list in landscape mode with keyb…

86d9d85

…oard open

Review feedback changes

3c028f5

Use Group and GroupMember for Wallet screens

85975e0

GCyganek marked this pull request as ready for review September 29, 2026 13:30

GCyganek requested review from a team as code owners September 29, 2026 13:30

melvin-bot Bot requested review from trjExpensify and truph01 and removed request for a team September 29, 2026 13:30

truph01 reviewed Oct 12, 2026

View reviewed changes

GCyganek added 2 commits October 12, 2026 13:33

BankAccountPuprosePage and CollectDepositAccount

c313d12

Merge branch 'main' into @GCyganek/landscape-mode/elements-hidden-beh…

d9d579b

…ind-keyboard

Merge branch 'main' into @GCyganek/landscape-mode/elements-hidden-beh…

d8b2d95

…ind-keyboard

truph01 approved these changes Oct 12, 2026

View reviewed changes

melvin-bot Bot requested a review from NicolasBonet October 12, 2026 12:27

NicolasBonet approved these changes Oct 12, 2026

View reviewed changes

NicolasBonet merged commit 06ca186 into Expensify:main Oct 12, 2026
35 of 37 checks passed

OSBotify mentioned this pull request Oct 13, 2026

Deploy Checklist: New Expensify 2026-10-13 #103843

Closed

This was referenced Oct 13, 2026

[Due for payment 2026-10-28] mweb - Rules - Next button on Describe modal is blocked by keyboard #103872

Closed

Android - Expense - App scrolls down to mid report view when text report field is focused #103909

Closed

neerajbachani mentioned this pull request Oct 16, 2026

[$250] [Exploratory] wallet-In landscape, input hidden and cursor shifts right after typing. #102562

Open

1 of 7 tasks

Conversation

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

Uh oh!

Explanation of Change

Fixed Issues

Tests

1. Create expense

2. Spend screen

3. Wallet

4. Workspace remove fixed distance

5. Workspace additional approver

6. Workspace company card edit name

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

GCyganek commented Sep 28, 2026

Uh oh!

dubielzyk-expensify commented Sep 29, 2026

Uh oh!

GCyganek commented Sep 29, 2026

Uh oh!

codecov Bot commented Sep 29, 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!

GCyganek commented Sep 29, 2026

Uh oh!

GCyganek commented Sep 29, 2026

Uh oh!

MelvinBot commented Sep 29, 2026

Review

Uh oh!

GCyganek commented Sep 29, 2026

Uh oh!

MelvinBot commented Sep 29, 2026

Follow-up review (up to 85975e0)

Uh oh!

melvin-bot Bot commented Sep 29, 2026

Uh oh!

truph01 Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

GCyganek Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

truph01 Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

GCyganek Oct 12, 2026

Choose a reason for hiding this comment

Uh oh!

truph01 commented Oct 12, 2026

Uh oh!

chatgpt-codex-connector Bot commented Oct 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codex Review Summary

Uh oh!

chatgpt-codex-connector Bot commented Oct 12, 2026

Uh oh!

GCyganek commented Oct 12, 2026

Uh oh!

truph01 commented Oct 12, 2026

Uh oh!

melvin-bot Bot commented Oct 12, 2026

Uh oh!

Uh oh!

github-actions Bot commented Oct 12, 2026

Uh oh!

OSBotify commented Oct 12, 2026

Uh oh!

github-actions Bot commented Oct 12, 2026

Uh oh!

OSBotify commented Oct 13, 2026

Uh oh!

MelvinBot commented Oct 13, 2026

Uh oh!

OSBotify commented Oct 14, 2026

Uh oh!

GCyganek commented Sep 28, 2026 •

edited

Loading

codecov Bot commented Sep 29, 2026 •

edited by github-actions Bot

Loading

Follow-up review (up to `85975e0`)

chatgpt-codex-connector Bot commented Oct 12, 2026 •

edited

Loading