Fix input hidden behind keyboard/header in landscape mode by GCyganek · Pull Request #88178 · Expensify/App

GCyganek · 2026-04-17T07:55:52Z

Explanation of Change

Introduces CollapsibleHeaderOnKeyboard wrapper for fixed headers that take too much vertical space in the landscape mode so that the header can be moved upward to give needed vertical space for the input to be visible above the open keyboard
adds isKeyboardAnimatingRef check to useLandscapeOnBlurProxy so that when the focused input gets hidden for a moment behind keyboard/header, until the header moves out of the screen, it gets re-focused
limited max number of lines for the Composer in landscape mode to 2
fixes reported problems with not visible focused inputs in landscape mode using CollapsibleHeaderOnKeyboard and layout changes

Fixed Issues

$ #87308, partially (Search bar hidden bug) #87405, #87415, #87312, #87403, #87377
PROPOSAL: #77280 (comment)

Tests

#87415:

bug 1:

Launch app
Go to settings - profile
Turn landscape
Tap status
Keep cursor on Message box
Verify that Message box is visible

bug 2:

Launch app
Go to settings - profile
Turn landscape
Tap Pronouns
Keep cursor on Pronouns box
Verify that Pronouns search box is visible

#87403:

Precondition:

Workspace is set up with Expensify Card.
User has assigned themselves a virtual card.

Launch Expensify app in landscape mode.
Go to workspace settings > Expensify Card.
Tap Issue card.
Proceed to "Give it a name" step.
Enter card name.
Verify that the name input is visible
Try to remove card name.
Verify Card name can be removed in landscape mode.

#87405:

Launch app
Login with validated account
Go to workspace settings - overview
Turn to landscape - currency
Note currency search displayed above keypad
Go to company cards- add card
Tap on search of where is your bank located
Verify Search bar in where is your bank located is not hidden

#87377:

Launch app
Open concierge
Turn to landscape
Keep cursor in compose box
Verify that when keypad opens the compose box is not hidden
Open workspace chat with an expense
On workspace chat page, Keep cursor in compose box
Verify when keypad opens that compose box is not hidden
Open the expense
In expense thread, Keep cursor in compose box
Verify when keypad opens that compose box is not hidden

#87312:

Launch Expensify app in landscape mode.
Go to workspace chat.
Create an expense.
Open the report.
Tap More > Split.
Tap on any split amount input.
Verify the focused amount field is visible when keyboard is opened.

#87308:

Launch the app and login with any account being on landscape mode
Open a Report page while on landscape
Tap on the text field and type your message
Verify user can see the complete text field

Verify that no errors appear in the JS console

Offline tests

QA Steps

Same as tests

Verify that no errors appear in the JS console

PR Author Checklist

Screenshots/Videos

Android: Native

#87415:

Screen.Recording.2026-04-17.at.10.30.36.mov

#87403:

Screen.Recording.2026-04-17.at.10.26.07.mov

#87405:

Screen.Recording.2026-04-17.at.10.35.16.mov

#87377:

Screen.Recording.2026-04-17.at.10.22.43.mov

Screen.Recording.2026-04-17.at.10.38.41.mov

#87312:

Screen.Recording.2026-04-17.at.10.41.34.mov

#87308:

Screen.Recording.2026-04-17.at.10.43.51.mov

iOS: Native

#87415:

Screen.Recording.2026-04-17.at.10.29.51.mov

#87403:

Screen.Recording.2026-04-17.at.10.27.39.mov

#87405:

Screen.Recording.2026-04-17.at.10.35.54.mov

#87377:

Screen.Recording.2026-04-17.at.10.38.03.mov

#87312:

Screen.Recording.2026-04-17.at.10.42.36.mov

#87308:

Screen.Recording.2026-04-17.at.10.44.18.mov

codecov · 2026-04-17T08:09:45Z

Codecov Report

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

Files with missing lines	Coverage Δ
src/CONST/index.ts	`92.30% <ø> (ø)`
...omponents/Composer/implementation/index.native.tsx	`60.78% <100.00%> (+0.78%)`	⬆️
src/components/InteractiveStepWrapper.tsx	`100.00% <100.00%> (ø)`
src/pages/inbox/ReportScreen.tsx	`100.00% <100.00%> (ø)`
src/pages/iou/SplitList.tsx	`0.00% <ø> (ø)`
src/pages/settings/Profile/PronounsPage.tsx	`0.00% <0.00%> (ø)`
...c/components/CollapsibleHeaderOnKeyboard/index.tsx	`0.00% <0.00%> (ø)`
src/hooks/useLandscapeOnBlurProxy/index.android.ts	`0.00% <0.00%> (ø)`
.../workspace/expensifyCard/issueNew/CardNameStep.tsx	`0.00% <0.00%> (ø)`
...s/Wallet/PersonalCards/steps/SelectCountryStep.tsx	`0.00% <0.00%> (ø)`
... and 4 more
... and 12 files with indirect coverage changes

GCyganek · 2026-04-17T08:32:27Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: de178e83bb

ℹ️ 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".

GCyganek · 2026-04-17T09:20:32Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 43f3c67668

ℹ️ 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".

GCyganek · 2026-04-17T09:59:54Z

@codex review

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1035e04eb3

ℹ️ 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".

chatgpt-codex-connector · 2026-04-17T10:11:58Z

+        const isKeyboardOpening = isKeyboardAnimatingRef.current && isKeyboardActive;
+        if ((prevIsInLandscapeMode !== isInLandscapeMode || isKeyboardOpening) && isInLandscapeMode) {


Distinguish keyboard opening before forcing refocus

The new blur proxy now treats isKeyboardAnimatingRef.current && isKeyboardActive as “keyboard opening”, but that condition can also be true during keyboard-dismiss transitions on Android (depending on event timing), so a normal blur (e.g. tapping outside or dismissing the keyboard) can immediately schedule focus() again and reopen the keyboard. Because this hook wraps all RNTextInput/RNMarkdownTextInput blur handlers in landscape, the regression can make dismissing focus unreliable across many inputs; please gate refocus on an actual open transition rather than any active animation.

Useful? React with 👍 / 👎.

According to https://github.com/Expensify/App/blob/main/src/components/withKeyboardState.tsx keyboardWillHide sets isKeyboardActive to false, I also tested both cases already and this doesn't happen. isKeyboardActive is false during close animation

melvin-bot · 2026-04-17T10:16:22Z

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

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1035e04eb3

ℹ️ 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".

JmillsExpensify

LGTM for product

Fix input hidden behind keyboard/header in landscape mode

48ad3b3

melvin-bot bot assigned GCyganek Apr 17, 2026

Fix types

7761f21

GCyganek added 2 commits April 17, 2026 10:23

Show max 2 lines in composer in landscape mode

ff65fdb

Fix import

de178e8

chatgpt-codex-connector bot reviewed Apr 17, 2026

View reviewed changes

Comment thread src/components/CollapsibleHeaderOnKeyboard/index.native.tsx Outdated

Fix naturalHeight updates

43f3c67

console.logs

7bc92e3

chatgpt-codex-connector bot reviewed Apr 17, 2026

View reviewed changes

Comment thread src/components/CollapsibleHeaderOnKeyboard/index.native.tsx Outdated

Comment thread src/hooks/useLandscapeOnBlurProxy/index.android.ts Outdated

Refocus only when opening the keyboard if it gets onBlur

1035e04

chatgpt-codex-connector bot reviewed Apr 17, 2026

View reviewed changes

GCyganek marked this pull request as ready for review April 17, 2026 10:16

GCyganek requested review from a team as code owners April 17, 2026 10:16

melvin-bot bot requested review from JmillsExpensify and truph01 April 17, 2026 10:16

melvin-bot bot removed request for a team April 17, 2026 10:16

github-actions bot reviewed Apr 17, 2026

View reviewed changes

Comment thread src/components/CollapsibleHeaderOnKeyboard/index.native.tsx

github-actions bot reviewed Apr 17, 2026

View reviewed changes

Comment thread src/components/InteractiveStepWrapper.tsx

github-actions bot reviewed Apr 17, 2026

View reviewed changes

Comment thread src/pages/iou/SplitExpensePage.tsx Outdated

Feedback

be06128

chatgpt-codex-connector bot reviewed Apr 17, 2026

View reviewed changes

Comment thread src/components/CollapsibleHeaderOnKeyboard/index.native.tsx

JmillsExpensify approved these changes Apr 17, 2026

View reviewed changes

		const isKeyboardOpening = isKeyboardAnimatingRef.current && isKeyboardActive;
		if ((prevIsInLandscapeMode !== isInLandscapeMode \|\| isKeyboardOpening) && isInLandscapeMode) {

Conversation

GCyganek commented Apr 17, 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 Apr 17, 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 Apr 17, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

GCyganek commented Apr 17, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

Uh oh!

GCyganek commented Apr 17, 2026

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

chatgpt-codex-connector bot Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

GCyganek Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

melvin-bot bot commented Apr 17, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

JmillsExpensify left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

GCyganek commented Apr 17, 2026 •

edited

Loading

codecov bot commented Apr 17, 2026 •

edited by github-actions bot

Loading