Fix Agents - Input field does not auto scroll down when entering next line#94565
Conversation
|
Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers! |
|
@Expensify/design could you take a look? I changed the behaviour in landscape mode to shrink the prompt input so that ~2 lines are visible with open keyboard and fixed scroll on input focus on iOS as it does not work automatically with multiline text inputs. I feel like it would be better to set max height in landscape mode for the prompt input, but I left it as is as and wanted to first ask you about it here. Currently it grows with the prompt text, but we could add max height and make it scrollable when it hits the height limit (like in portrait or on web) Screen.Recording.2026-06-25.at.11.53.00.movScreen.Recording.2026-06-25.at.12.37.02.mov |
Codecov Report✅ Changes either increased or maintained existing code coverage, great job!
|
|
@GCyganek that makes sense to me, I say go for it. |
|
@codex please review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: dca8f12b6b
ℹ️ 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".
|
@mkhutornyi 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 could you review as this is landscape mode issue? |
Sure, I will review it |
|
@NicolasBonet Could you assign me to this PR based on #94565 (comment)? |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| testID={EditPromptPage.displayName} | ||
| includeSafeAreaPaddingBottom | ||
| offlineIndicatorStyle={styles.mtAuto} | ||
| shouldEnableMaxHeight={shouldUseScrollableLayout} |
There was a problem hiding this comment.
shouldEnableMaxHeight dropped without an equivalent in EditPromptPage
AddAgentPage.tsx keeps shouldEnableMaxHeight={shouldUseScrollableLayout} on its ScreenWrapper, but this prop was removed entirely here rather than wired to the new isInLandscapeMode value. Was that intentional, or should it mirror AddAgentPage's handling for consistency?
There was a problem hiding this comment.
EditPromptPage is a bit different, as I wanted the input to take the rest of the height in landscape mode, whereas in AddAgentPage in landscape mode the input height is a static value, it was intentional to remove it only in EditPromptPage
| ) : null} | ||
| {hiddenLabel} | ||
| <View style={[styles.textInputAndIconContainer, styles.flex1, isMultiline && hasLabel && styles.textInputMultilineContainer, styles.pointerEventsBoxNone]}> | ||
| <View style={[styles.textInputAndIconContainer, isMultiline && hasLabel ? styles.textInputMultilineContainer : styles.flex1, styles.pointerEventsBoxNone]}> |
There was a problem hiding this comment.
Shared TextInput style change may affect other multiline+label inputs app-wide
This tweaks BaseTextInput's native implementation (used app-wide), making flex1 mutually exclusive with textInputMultilineContainer instead of always-applied. AddAgentRulePage.tsx and EditAgentRulePage.tsx use the exact same multiline+label pattern this replaces, but aren't updated here.
Could you confirm those screens still render correctly, or scope this fix locally instead of in the shared implementation?
There was a problem hiding this comment.
While investigating this I noticed that AddAgentRulePage and EditAgentRulePage have similar implementation to what was in EditPrompPage and AddAgentPage I changed in this PR. I will update these components as well to make the behaviour in landscape mode consistent
There was a problem hiding this comment.
I'll then check if this change does not break anything because these 2 components + AgentAIPromptSection are the only one that use multiline input with label
There was a problem hiding this comment.
styles.textInputMultilineContainer sets height: 100% which I wanted to keep in case we have both isMultiline and hasLabel as true values, as keeping both height: 100% and flex: 1 in this case was causing problems with input resizing during device orientation change
There was a problem hiding this comment.
nvm, I just tested it again without this change and it works fine 🙄
|
@Expensify/design I realized that there are two places that have the same behaviour (add and edit agent rule in workspace) in landscape mode as the screens I have already fixed here that were reported as bugged. Could you confirm if this is ok now? Screen.Recording.2026-07-02.at.16.08.32.movScreen.Recording.2026-07-02.at.16.04.37.movCompared to current behaviour: Screen.Recording.2026-07-02.at.16.16.15.mov |
| const targetHeight = Math.max(0, keyboardTop - VERTICAL_SPACE_FOR_FOCUSED_INPUT - collapsibleHeaderOffsetSV.get()); | ||
| const targetHeight = alwaysCollapseHeaderOnKeyboard | ||
| ? MIN_HEADER_HEIGHT_ON_COLLAPSE | ||
| : Math.max(MIN_HEADER_HEIGHT_ON_COLLAPSE, keyboardTop - VERTICAL_SPACE_FOR_FOCUSED_INPUT - collapsibleHeaderOffsetSV.get()); |
There was a problem hiding this comment.
MIN_HEADER_HEIGHT_ON_COLLAPSE changes collapse behavior for all existing consumers.
The old floor was Math.max(0, ...), the new one is Math.max(16, ...). This affects every existing consumer of CollapsibleHeaderOnKeyboard that doesn't pass alwaysCollapseHeaderOnKeyboard..
Is it fine?
There was a problem hiding this comment.
It's fine. It's just that designers didn't like cases where we did not have any padding above the input on header collapse, so I decided to fix all such cases like this, because I was getting new cases with inputs shown without top padding on header collapse on this PR
| const shouldUseScrollableLayout = useIsInLandscapeMode(); | ||
| const {windowWidth, windowHeight} = useWindowDimensions(); | ||
| const {isKeyboardActive} = useKeyboardState(); | ||
| const isInLandscapeMode = isInLandscapeModeUtil(windowWidth, windowHeight) || (isMobile() && windowWidth > windowHeight); |
There was a problem hiding this comment.
Inconsistent landscape detection across sibling pages
EditPromptPage computes landscape as:
isInLandscapeModeUtil(windowWidth, windowHeight) || (isMobile() && windowWidth > windowHeight)
while AddAgentRulePage and EditAgentRulePage use:
useIsInLandscapeMode().
These are equivalent today (both web-noop, both phone-only on native), but the diverging patterns are confusing for anyone reading this code side-by-side.
There was a problem hiding this comment.
I didn't want to overwrite original approach as it was not connected to the issue, but I checked mWeb of this page and i'ts not usable even with this change, so if we want to have the same approach, then I'd drop isMobile() && windowWidth > windowHeight check and focus on checking this later for mWeb
There was a problem hiding this comment.
Dropped mWeb landscape check
|
@Expensify/design Could you check this comment? |
| // Assumed vertical space for the focused input field — used to reserve space above the keyboard. | ||
| const VERTICAL_SPACE_FOR_FOCUSED_INPUT = 120; | ||
| const KEYBOARD_OPENING_PROGRESS_THRESHOLDS = [0.5, 0.7, 0.8, 0.85, 0.9, 0.95, 0.99]; | ||
| const MIN_HEADER_HEIGHT_ON_COLLAPSE = 16; |
There was a problem hiding this comment.
Good catch, I'll try to unify the approach for this on both PRs
There was a problem hiding this comment.
I set 8 as min header height on collapse, will update the mentioned PR in a moment
Yeah, that approach still seems fine to me 👍 |
3 participants
Explanation of Change
Fixes the Add Agent prompt and Edit Agent prompt multiline input in landscape/mobile landscape when the keyboard is open. Collapses the header via
CollapsibleHeaderOnKeyboard, shrinks the prompt to two visible lines, scrolls the form on iOS focus, and adjusts native multilineBaseTextInputflex so the field stays usable above the keyboard.Fixed Issues
$ #93631
PROPOSAL: N/A
Tests
Offline tests
N/A
QA Steps
Same as tests.
PR Author Checklist
### Fixed Issuessection aboveTestssectionOffline stepssectionQA stepssectiontoggleReportand notonIconClick)Avatar, I verified the components usingAvatarare working as expected)StyleUtils.getBackgroundAndBorderStyle(theme.componentBG))npm run compress-svg)Avataris modified, I verified thatAvataris working as expected in all cases)Designlabel and/or tagged@Expensify/designso the design team can review the changes.mainbranch was merged into this PR after a review, I tested again and verified the outcome was still expected according to theTeststeps.Screenshots/Videos
Android: Native
Screen.Recording.2026-07-02.at.12.40.52.mov
Screen.Recording.2026-07-02.at.12.41.29.mov
Android: mWeb Chrome
iOS: Native
Screen.Recording.2026-07-02.at.11.51.00.mov
Screen.Recording.2026-07-02.at.11.51.50.mov
iOS: mWeb Safari
MacOS: Chrome / Safari
Screen.Recording.2026-07-02.at.12.58.40.mov