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 contributors@expensify.com 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
• [x] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/66e425ae-2267-43f6-b6b3-1645525dceb2

View all open jobs on GitHub

[melvin-bot[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. https://github.com/Expensify/App/blob/09f19c3ad08b269db9821bb9c4eb45152bd9b7cb/src/components/MoneyRequestHeader.tsx#L123-L128

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