[$250] Open duplicate expense - “This expense is on Hold” content overlaps with the keyboard.

[m-natarajan]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.50-5
Reproducible in staging?: y
Reproducible in production?: y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?:
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @suneox
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1729092611052969

Action Performed:

Precondition:

• New account with betas enabled for duplicate expense.
• Two workspaces created.

1. Submit 2 expenses to Workspace A.
2. Submit 2 expenses with the same value as in Step 1 to Workspace B.
3. Open the expense group.
4. Select the duplicate transaction.

Expected Result:

The modal introducing “This expense is on Hold” is open and the content should be fully visible without any overlap.

Actual Result:

The modal introducing “This expense is on Hold” opens and the content overlaps with the keyboard.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

ScreenRecording_10-16-2024.22-26-11_1_2.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849438927318784165
• Upwork Job ID: 1849438927318784165
• Last Price Increase: 2024-11-07

Issue Owner

Current Issue Owner: @paultsimura

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[suneox]

@muttmuure I think this issue can make for external. I have more context on it so I can assist with reviewing the proposal as a C+.

ScreenRecording_10-16-2024.22-26-11_1_2.mp4

[NJ-2020]

Edited by proposal-police: This proposal was edited at 2024-10-18 08:13:16 UTC.

Proposal

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

Open duplicate expense - “This expense is on Hold” content overlaps with the keyboard

What is the root cause of that problem?

We're not dismissing the keyboard when navigation to PROCESS_MONEY_REQUEST_HOLD page

App/src/components/MoneyReportHeader.tsx

Lines 302 to 305 in e4fe4c4

	if (isSmallScreenWidth) {
	if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
	Navigation.goBack();
	}

And same here

App/src/components/MoneyRequestHeader.tsx

Lines 133 to 136 in e4fe4c4

	if (isSmallScreenWidth) {
	if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
	Navigation.goBack();
	}

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

We should dismiss the keyboard before navigating

if (isSmallScreenWidth) {
    if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
        Keyboard.dismiss();
        Navigation.goBack();
    }
} else {
    ...

What alternative solutions did you explore? (Optional)

We can dismiss the keyboard outside the if statement so the Keyboard.dismiss() will get invoked both in small screen and large screen in case if the isSmallScreenWidth value is undefined

Keyboard.dismiss();
if (isSmallScreenWidth) {
    if (Navigation.getActiveRoute().slice(1) === ROUTES.PROCESS_MONEY_REQUEST_HOLD.route) {
        Navigation.goBack();
    }
} else {
    ...

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@muttmuure Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021849438927318784165

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @paultsimura (External)

[paultsimura]

Reviewing soon 👀

[FitseTLT]

Proposal

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

mWeb - Dupe detect - Keyboard displayed below educational modal when open dupe expense

What is the root cause of that problem?

The composer auto focuses on opening the transaction thread and then popover will be open as soon as shouldShowHoldMenu is set to true here

App/src/components/MoneyRequestHeader.tsx

Line 127 in f46bce0

setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation);

so the popover will overlap with the keyboard

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

We should blur the report action compose whenever we display the hold menu (isVisible changes to true)
Here

App/src/components/ProcessMoneyRequestHoldMenu.tsx

Line 44 in f46bce0

return (

useEffect(() => {
        if (!isVisible) {
            return;
        }
        ReportActionComposeFocusManager.composerRef.current?.blur();
    }, [isVisible]);

FYI: Keyboard.dismiss doesn't suffice as the cursor will be visible under the popover and most importantly it doesn't work for web

What alternative solutions did you explore? (Optional)

We can also use Focus Trap in ProcessMoneyRequestHoldMenu (or generally in Popover component) by passing isVisible to active prop, that will automatically defocus the compose or any other text input when the popover is displayed

[FitseTLT]

@paultsimura this is a dupe of #51398 (comment) so reposting my proposal here because this one is older. 👍

[paultsimura]

Thanks for the proposals.

@FitseTLT could you please share the recording of this case?

the cursor will be visible under the popover

Also, you say that it doesn't work for web – but the issue is not relevant for the web, is it?

[FitseTLT]

@paultsimura Looks like the behaviour has changed; can't reproduce the bug in both mweb and native

2024-10-28.17-00-16.mp4

Can you?

[paultsimura]

Neither can I 🤔
@suneox can you reproduce on the latest main?

[suneox]

Neither can I 🤔 @suneox can you reproduce on the latest main?

@paultsimura I'm also can not reproduce on latest main

[paultsimura]

That's both sad and relieving.

@muttmuure seems like we can close this one, or ask the QA team to retest first.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@paultsimura, @muttmuure Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[muttmuure]

Let's close