[$250] iOS - Keyboard opens in front of the hold banner

[vincdargento]

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.71-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: #49971
Email or phone of affected tester (no customers): nathanmulugetatesting+2264@gmail.com
Issue reported by: Applause Internal Team

Action Performed:

1. Open hybrid app on a new account
2. Create a workspace
3. Submit expenses
4. Go into the transaction thread of one of the expenses
5. Tap on header > Hold

Expected Result:

The keyboard doesn't open while the banner is shown

Actual Result:

The keyboard opens up in front of the hold banner

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021866934797160828341
• Upwork Job ID: 1866934797160828341
• Last Price Increase: 2024-12-11
• Automatic offers:
• truph01 | Contributor | 105371091

Issue Owner

Current Issue Owner: @anmurali

[melvin-bot]

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

[truph01]

Proposal

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

• The keyboard opens up in front of the hold banner

What is the root cause of that problem?

• When we "Hold expense", we display the popover:

App/src/components/MoneyReportHeader.tsx

Lines 512 to 513 in d7859ea

	{isSmallScreenWidth && shouldShowHoldMenu && (
	<ProcessMoneyRequestHoldMenu

App/src/components/MoneyRequestHeader.tsx

Lines 218 to 219 in d7859ea

	{isSmallScreenWidth && shouldShowHoldMenu && (
	<ProcessMoneyRequestHoldMenu

Meanwhile, the input will be focused automatically if we are focusing on it before, so the composer is focused and the keyboard is opening.

As a result, the keyboard opens in front of the hold banner.

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

• When we open the popover, we should hide the keyboard. And after the popover is closed, we should focus on the composer if it is focused before (Optional). So the Popover component:
  

  App/src/components/ProcessMoneyRequestHoldMenu.tsx

  Line 45 in d7859ea

  <Popover

  
  can be updated to:

        const composerStatusBeforeModalShowRef = useRef(false);
        <Popover
            ...
            onClose={() => {
                if (composerStatusBeforeModalShowRef.current) {
                    ReportActionComposeFocusManager.focus(true);
                    composerStatusBeforeModalShowRef.current = false;
                }
                onClose?.();
            }}
            onModalShow={() => {
                composerStatusBeforeModalShowRef.current = ReportActionComposeFocusManager.isFocused();
                Keyboard.dismiss();
            }}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

What alternative solutions did you explore? (Optional)

Alternative solution 1:

• We can add an useEffect to ReportScreen, which will auto close the keyboard if there is any modal will be opened:

    const [modal] = useOnyx(ONYXKEYS.MODAL);
    const prevModal = usePrevious(modal);
    useEffect(() => {
        if (modal?.willAlertModalBecomeVisible && !prevModal?.willAlertModalBecomeVisible) {
            Keyboard.dismiss();
        }
    }, [modal, prevModal]);

Alternative solution 2:

• We can call Keyboard.dismiss() in:

App/src/components/Modal/BaseModal.tsx

Line 106 in 5180ef4

Modal.willAlertModalBecomeVisible(true, type === CONST.MODAL.MODAL_TYPE.POPOVER || type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED);

• Should add a flag param such as shouldCloseKeyboardOnOpen and just call Keyboard.dismiss() if that param is true

Note: These two alternative solutions will work in all other modals, not only the hold modal. And, the feature "after the popover is closed, we should focus on the composer if it is focused before (Optional)" is handled like what I mentioned in the main solution.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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