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

IuliiaHerets commented 1 month ago

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:

Open staging.new.expensify.com
Tap FAB and select Submit expense.
Select Manual option.
Enter the amount, tap Next.
Select Workspace name.
Tap the Merchant field, enter merchant name.
Tap Save.
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
[x] iOS: mWeb Safari
[ ] MacOS: Chrome / Safari
[ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/6939db43-6c1a-4ed8-a444-24f3bb2a26eb

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

Issue Owner

Current Issue Owner: @eh2077

melvin-bot[bot] commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

Proposal updated

melvin-bot[bot] commented 4 weeks ago

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

melvin-bot[bot] commented 4 weeks ago

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

greg-schroeder commented 4 weeks ago

Sending through to External

melvin-bot[bot] commented 4 weeks ago

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

eh2077 commented 3 weeks ago

@truph01 Thanks for your proposal!

Is it possible to dismiss the keyboard before returning / navigating to the submit page?

truph01 commented 3 weeks ago

Is it possible to dismiss the keyboard before returning / navigating to the submit page?

We can implement it, but it makes the app feel very slow since, after the user clicks the Save button in step 7, the screen doesn't close immediately

eh2077 commented 3 weeks ago

@truph01 As this issue only happen on mobile Safari, I have concerns about your solution to introduce several states that will be applied to other platforms as well. Would you like to explore a simpler solution?

truph01 commented 3 weeks ago

@eh2077 Can you reproduce the issue in the latest main?

truph01 commented 3 weeks ago

@eh2077 I saw that we already have the same solution to address the same issue in here: https://github.com/Expensify/App/blob/ff6d622f9935a872314ba5d2b812f4aa539e1670/src/components/PDFView/index.tsx#L74-L86

The above useEffect is used to determine if the keyboard is currently visible. It checks the keyboard status by monitoring the window height, as the keyboardDidShow event does not function properly on the web.

melvin-bot[bot] commented 3 weeks ago

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

eh2077 commented 3 weeks ago

@truph01 Thanks for your comment. I tested in iOS native App and also found it has same issue but less noticeable than mobile Safari.

I think we can go with @truph01 's proposal - adding an extra state of keyboard opening status to decide whether to hide the submit button or not. Maybe we should consider creating a new hook for this use case. We can discuss more in the PR.

🎀👀🎀 C+ reviewed

melvin-bot[bot] commented 3 weeks ago

Triggered auto assignment to @thienlnam, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot[bot] commented 3 weeks ago

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

truph01 commented 2 weeks ago

PR is ready

greg-schroeder commented 2 weeks ago

PR review continues

greg-schroeder commented 1 week ago

Same as above

greg-schroeder commented 1 day ago

Reviews continue on linked PR, recent updates as of a few hours ago

Expensify / App