Fix: allow multi-line description in new manual expense flow#94540
Fix: allow multi-line description in new manual expense flow#94540MelvinBot wants to merge 3 commits into
Conversation
Co-authored-by: thelullabyy <thelullabyy@users.noreply.github.com>
|
I looked into the failing checks — there's nothing in the code to fix. The only check reporting a failure is Every actual code check is green: So: no fix needed from me — just complete the author checklist. |
|
@MelvinBot Please resolve conflicts. After that replace all |
…scriptionManualExpense Co-authored-by: thelullabyy <thelullabyy@users.noreply.github.com> # Conflicts: # src/components/MoneyRequestConfirmationList.tsx # src/components/MoneyRequestConfirmationList/sections/DescriptionField.tsx # src/components/MoneyRequestConfirmationListFooter.tsx
|
@thelullabyy 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] |
|
🤖 Done — all three requests handled:
The PR is now mergeable (no conflicts). |
|
🤖 I looked into the failing checks — there's nothing to fix. When the request came in, the only failing check was PR Author Checklist (
So no code fix is needed. The PR Author Checklist is the one item I can't act on for you: please make sure every box in the PR description's author checklist is ticked. |
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: f041f3c15e
ℹ️ 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".
| @@ -112,8 +110,6 @@ function DescriptionField({ | |||
| readOnly={didConfirm} | |||
| onChangeText={handleDescriptionInputChange} | |||
| onFocus={() => scrollFocusedInputIntoView?.(fieldContainerRef.current)} | |||
There was a problem hiding this comment.
Preserve desktop submit behavior for descriptions
When this inline field is used in the new manual expense flow on desktop/no-touch devices, dropping the submit props removes the only path that calls confirm from the focused description input. The existing form wrapper explicitly keeps blurAndSubmit for multiline text on hardware-keyboard setups (src/components/Form/InputWrapper.tsx:34-50) because Shift+Enter can still add a newline, so the Android/touch fix should be gated instead of removing Enter-to-confirm globally.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Good catch — this is valid. I confirmed the dedicated description step page (IOURequestStepDescription.tsx:202-215) renders through InputWrapper, which injects blurAndSubmit for multiline inputs only on hardware-keyboard setups (InputWrapper.tsx:34-50). So fully dropping the props made the inline field diverge from the step page on desktop, losing Enter-to-confirm there.
Fixed in 8b365fd by gating instead of removing, mirroring InputWrapper's logic (DescriptionField.tsx:120-121):
- Touch devices:
submitBehavior="newline", noonSubmitEditing→ Enter inserts a line break (fixes the original Android bug, since the soft keyboard has no other way to add one). - Hardware keyboard (
!canUseTouchScreen()):submitBehavior="blurAndSubmit"+onSubmitEditing={onSubmitForm}→ Enter confirms, Shift+Enter adds a newline — matching the step page.
Rather than re-thread the removed onSubmitForm prop chain, I deliver confirm through the existing ConfirmationFields context (the same mechanism the PR already uses for scrollFocusedInputIntoView), so it reaches the field without passing through the intermediate components.
Typecheck and React Compiler compliance pass.
|
@MelvinBot please check this comment and update code if needed |
Reviewer Checklist
Screenshots/VideosAndroid: HybridAppScreen.Recording.2026-06-27.at.01.30.04.movAndroid: mWeb ChromeScreen.Recording.2026-06-27.at.01.28.03.moviOS: HybridAppScreen.Recording.2026-06-27.at.01.11.33.moviOS: mWeb SafariMacOS: Chrome / SafariScreen.Recording.2026-06-27.at.01.18.04.mov |
Keep Enter-to-confirm for the inline description on desktop/no-touch (Shift+Enter still adds a newline there), while keeping Enter as newline on touch devices so multi-line descriptions remain typable. Delivers the confirm callback via ConfirmationFields context instead of re-threading the prop chain. Co-authored-by: thelullabyy <thelullabyy@users.noreply.github.com>
|
@puneetlath 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] |
Explanation of Change
On the new manual expense flow, the inline description input in the confirmation list was a multi-line (
autoGrowHeight)TextInputthat hardcodedsubmitBehavior="blurAndSubmit"(paired withonSubmitEditing={onSubmitForm}). On Android native,blurAndSubmitoverrides React Native's default multi-linesubmitBehaviorof"newline", so the Enter key blurs/submits the form (the keyboard shows Done) instead of inserting a line break — making it impossible to type a multi-line description.This was only reproducible in staging (not production) because the inline input is gated behind the
isNewManualExpenseFlowEnabledbeta. The offending PR that removed the beta gate (#94134) was already reverted (#94312), so the bug is hidden in production again — but the underlying input bug remains and would resurface when the new flow is re-enabled.This change removes
submitBehavior="blurAndSubmit"/onSubmitEditingfrom the multi-line description input so it falls back to RN's default"newline"behavior, allowing Enter to insert a line break — matching the dedicatedIOURequestStepDescriptionstep page (used in the old/production path), which sets nosubmitBehavior.Since the description field was the only consumer of the
onSubmitFormcallback, the now-deadonSubmitFormprop chain (MoneyRequestConfirmationList→MoneyRequestConfirmationListFooter→ConfirmationFieldList→TransactionDetailsFields→DescriptionField) is removed as well.Fixed Issues
$ #94258
PROPOSAL: #94258 (comment)
Tests
// TODO: The human co-author must fill out the tests you ran before marking this PR as "ready for review"
// Please describe what tests you performed that validates your changed worked.
Offline tests
Same as Tests.
QA Steps
// TODO: The human co-author must fill out the QA tests you ran before marking this PR as "ready for review".
// Please describe what QA needs to do to validate your changes and what areas do they need to test for regressions.
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
Android: mWeb Chrome
iOS: Native
iOS: mWeb Safari
MacOS: Chrome / Safari