[$250] mWeb - Dupe detect - Keyboard displayed below educational modal when open dupe expense

[IuliiaHerets]

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.53-0
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
   and log in with a new account
2. Create a workspace
3. Navigate to the workspace chat
4. Submit 2 expenses with the same amount
5. Open any expense

Expected Result:

The keyboard is hidden when the educational modal opens

Actual Result:

The keyboard is displayed below the educational modal
It does not happen when manually putting an expense on hold

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6644031_1729746958861.video_2024-10-24_01-15-27.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021849586790771531414
• Upwork Job ID: 1849586790771531414
• Last Price Increase: 2024-10-24

Issue Owner

Current Issue Owner: @mananjadhav

[melvin-bot]

Triggered auto assignment to @MitchExpensify (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.

[IuliiaHerets]

We think that this bug might be related to #wave-control

[IuliiaHerets]

@MitchExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[nyomanjyotisa]

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?

When opening expense page it auto focus on the composer input and automatically opens the keyboard, and we don't dismiss the keyboard if the hold menu displayed

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

Dismiss keyboard if hold menu displayed/visible

Add the following code here

    useEffect(() => {
        if (isVisible) {
            Keyboard.dismiss();
        }
    }, [isVisible]);

What alternative solutions did you explore? (Optional)

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-10-24 12:43:25 UTC.

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?

• We aren't dismissing the keyboard when we are rendering the educational modal.
  

  App/src/components/MoneyRequestHeader.tsx

  Lines 123 to 128 in 09f19c3

  	useEffect(() => {
  	if (isLoadingHoldUseExplained) {
  	return;
  	}
  	setShouldShowHoldMenu(isOnHold && !dismissedHoldUseExplanation);
  	}, [dismissedHoldUseExplanation, isLoadingHoldUseExplained, isOnHold]);

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


• We should dismiss the keyboard before setting shouldShowHoldMenu to true.
• OPTIONAL: We can only dismiss the keyboard when isOnHold && !dismissedHoldUseExplanation) is true.
• Same should be done in MoneyReportHeader

What alternative solutions did you explore? (Optional)

Result

[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

[melvin-bot]

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

[melvin-bot]

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

[FitseTLT]

@MitchExpensify this is a dupe of an older issue #51060
Let's close this one