[$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 contributors@expensify.com 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): applausetester+kh0811002@applause.expensifail.com 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
• [x] MacOS: Chrome / Safari
• [x] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/d57492de-5591-479d-ac36-abd7c917bfeb

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[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

https://github.com/Expensify/App/blob/461781621a22903b64534202c95811890bf05df4/src/components/MoneyRequestConfirmationList.tsx#L828

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

https://github.com/Expensify/App/blob/002961484c27ddd8879c32c6bcbdc3771c33ef73/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts#L27-L28

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.

https://github.com/Expensify/App/blob/002961484c27ddd8879c32c6bcbdc3771c33ef73/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts#L27

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.

https://github.com/Expensify/App/blob/937064c997d2cbfe8d3d9f6eb181e6da03923c2c/src/components/MoneyRequestConfirmationList.tsx#L825-L827

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

https://github.com/Expensify/App/blob/9c4e6625d04582d3404c806b328064ce02aa0976/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts#L28

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.

https://github.com/Expensify/App/blob/9c4e6625d04582d3404c806b328064ce02aa0976/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts#L11-L19

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

https://github.com/Expensify/App/blob/9c4e6625d04582d3404c806b328064ce02aa0976/src/hooks/useIsWindowHeightReducedByKeyboard/index.ts#L11-L19

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:

https://github.com/Expensify/App/blob/937064c997d2cbfe8d3d9f6eb181e6da03923c2c/src/components/MoneyRequestConfirmationList.tsx#L825-L827

to

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

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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