[$250] mWeb/Safari - Expense - Submit button hangs in the middle of expense details page for 2 sec

[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: v9.0.48-0
Reproducible in staging?: YY
Reproducible in production?:
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5075760
Issue reported by: Applause Internal Team

Action Performed:

1. Open staging.new.expensify.com
2. Tap FAB and select Submit expense.
3. Select Manual option.
4. Enter the amount, tap Next.
5. Select Workspace name.
6. Tap the Merchant field, enter merchant name.
7. Tap Save.
8. Observe the expense details page.

Expected Result:

User returned back to expense details page, the page is displayed correctly.

Actual Result:

Submit button hangs in the middle of expense details page for 2 sec after entering and saving Merchant.

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6632006_1728663459480.Submit_button.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021845948123449591250
• Upwork Job ID: 1845948123449591250
• Last Price Increase: 2024-10-21
• Automatic offers:
• truph01 | Contributor | 104543192

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

[IuliiaHerets]

@greg-schroeder 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

[truph01]

Edited by proposal-police: This proposal was edited at 2024-10-12 01:50:22 UTC.

Proposal

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

• Submit button hangs in the middle of expense details page for 2 sec after entering and saving Merchant.

What is the root cause of that problem?

• When the keyboard is opened and you navigate back to the confirmation screen, the keyboard remains visible, causing the confirmation view to display in the remaining space (full screen height minus the keyboard height).

• Once the keyboard is hidden, the container height doesn't update immediately, resulting in the submit button floating in the middle for a brief moment.

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

• We should hide the button if the keyboard is still shown. To do it, add:

const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
    const {windowHeight} = useWindowDimensions();
    const prevWindowHeight = usePrevious(windowHeight);
    const {shouldUseNarrowLayout} = useResponsiveLayout();
    const toggleKeyboardOnSmallScreens = useCallback(
        (isKBOpen: boolean) => {
            if (!shouldUseNarrowLayout) {
                return;
            }
            setIsKeyboardOpen(isKBOpen);
        },
        [shouldUseNarrowLayout],
    );
    useEffect(() => {
        if (!isKeyboardOpen && windowHeight < prevWindowHeight - 100) {
            toggleKeyboardOnSmallScreens(true);
        } else if (isKeyboardOpen && windowHeight > prevWindowHeight) {
            toggleKeyboardOnSmallScreens(false);
        }
    }, [isKeyboardOpen, prevWindowHeight, toggleKeyboardOnSmallScreens, windowHeight]);

and early return in this if isKeyboardOpen is true.

• Optinal: We can display empty screen/loading screen in money request confirmation page if the isKeyboardOpen is true

What alternative solutions did you explore? (Optional)

• Beside using isKeyboardOpen state as above, me can use hook const {keyboardHeight: isKeyboardOpen} = useKeyboardState().

[truph01]

Proposal updated

[melvin-bot]

@greg-schroeder Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[greg-schroeder]

Sending through to External