[$250] Expense - Submit button is missing after switching layout from mobile to web

[izarutskaya]

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.65-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to DM.
3. Click + > Submit expense > Manual.
4. Proceed to confirmation page.
5. Note that Submit button is present.
6. Open developer tools and switch to mobile layout.
7. Note that Submit button is present.
8. Return to web layout.

Expected Result:

Submit button will be shown.

Actual Result:

Submit button is missing on confirmation page after switching layout from mobile to web.

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

Bug6671472_1732169889618.20241121_141701.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859734598640577777
• Upwork Job ID: 1859734598640577777
• Last Price Increase: 2024-11-21

Issue Owner

Current Issue Owner: @s77rt

[melvin-bot]

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

[cretadn22]

Proposal

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

Submit button is missing after switching layout from mobile to web

What is the root cause of that problem?

This bug occurs because isWindowHeightReducedByKeyboard is set to true and it is preventing the button from rendering

App/src/components/MoneyRequestConfirmationList.tsx

Line 828 in 4617816

if (isReadOnly || isKeyboardShown || isWindowHeightReducedByKeyboard) {

When switching the layout from web to mobile (reducing the window height), we toggle isWindowHeightReducedByKeyboard to true

App/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts

Lines 27 to 28 in 0029614

	if (!isWindowHeightReducedByKeyboard && windowHeight < prevWindowHeight - 100) {
	toggleKeyboardOnSmallScreens(true);

However, when switching the layout from mobile to web, we do not reset isWindowHeightReducedByKeyboard to false

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

We should only set isWindowHeightReducedByKeyboard to true if a keyboard is available on the device.

App/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts

Line 27 in 0029614

if (!isWindowHeightReducedByKeyboard && windowHeight < prevWindowHeight - 100) {

We should include canUseTouchScreen condition.

const canUseTouchScreen = DeviceCapabilities.canUseTouchScreen();


if (!isWindowHeightReducedByKeyboard && windowHeight < prevWindowHeight - 100 && canUseTouchScreen) { 

[huult]

Proposal

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

Submit button is missing after switching layout from mobile to web

What is the root cause of that problem?

The submit button is missing because the footer content is not rendered due to a condition that causes an early return, preventing the submit button from being rendered. This happens because isWindowHeightReducedByKeyboard returns true.

App/src/components/MoneyRequestConfirmationList.tsx

Lines 825 to 827 in 937064c

	if (isReadOnly || isKeyboardShown || isWindowHeightReducedByKeyboard) {
	return;
	}

When we open the developer tools and switch to the mobile layout, isWindowHeightReducedByKeyboard returns true.

App/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts

Line 28 in 9c4e662

toggleKeyboardOnSmallScreens(true);

After switching to the desktop layout, isWindowHeightReducedByKeyboard still returns true because it is unable to update. Inside toggleKeyboardOnSmallScreens, we check shouldUseNarrowLayout and return early. On desktop, shouldUseNarrowLayout returns false because it is neither a small screen and not isNarrowPaneModal. As a result, isWindowHeightReducedByKeyboard does not update its value and remains true, causing the footer content to return early and the submit button to be missing.

App/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts

Lines 11 to 19 in 9c4e662

	const toggleKeyboardOnSmallScreens = useCallback(
	(isKBOpen: boolean) => {
	if (!shouldUseNarrowLayout) {
	return;
	}
	setIsWindowHeightReducedByKeyboard(isKBOpen);
	},
	[shouldUseNarrowLayout],
	);

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

To resolve this issue, we should reset isWindowHeightReducedByKeyboard to false when resizing to desktop. Something like this

App/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts

Lines 11 to 19 in 9c4e662

	const toggleKeyboardOnSmallScreens = useCallback(
	(isKBOpen: boolean) => {
	if (!shouldUseNarrowLayout) {
	return;
	}
	setIsWindowHeightReducedByKeyboard(isKBOpen);
	},
	[shouldUseNarrowLayout],
	);

to

    const toggleKeyboardOnSmallScreens = useCallback(
        (isKBOpen: boolean) => {
            if (!shouldUseNarrowLayout) {
+                if (!isSmallScreenWidth && isWindowHeightReducedByKeyboard) {
+                    setIsWindowHeightReducedByKeyboard(false);
+                }

                return;
            }
            setIsWindowHeightReducedByKeyboard(isKBOpen);
        },
        [shouldUseNarrowLayout],
    );

POC

What alternative solutions did you explore? (Optional)

We can update the condition in the footer content to return when isWindowHeightReducedByKeyboard is true and the screen is small. This ensures it will not execute on desktop. Something like this:

App/src/components/MoneyRequestConfirmationList.tsx

Lines 825 to 827 in 937064c

	if (isReadOnly || isKeyboardShown || isWindowHeightReducedByKeyboard) {
	return;
	}

to

-   if (isReadOnly || isKeyboardShown || isWindowHeightReducedByKeyboard) {
+   if (isReadOnly || isKeyboardShown || (isSmallScreenWidth && isWindowHeightReducedByKeyboard)) {
        return;
    }

[melvin-bot]

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

[melvin-bot]

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

[s77rt]

This is a regression from #51318 and I think it's still within the regression period. It's also causing other bugs e.g. #52828. It may be best to revert the PR

cc @truph01 @eh2077 @thienlnam

[melvin-bot]

Triggered auto assignment to @aldo-expensify (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[thienlnam]

It says this is also reproducible on production, so wouldn't it be a different issue?

[thienlnam]

Ah wait nvm, that PR has been on prod for a while

[aldo-expensify]

@thienlnam I'll assign you here since you are investigating and have a fix. 🙇

[s77rt]

Revert PR is merged. Let's close this one