[HOLD for payment 2023-07-28] [$1000] Chat - Send button disappears when 'No internet connection' banner appears on top of browser

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to staging.new.expensify.com
2. Go to any conversation
3. Upload a PDF but do not send it
4. Disconnect network.
5. Wait for about 10 secs until the banner 'No internet connection' appears on top of browser

Expected Result:

'Send' button does not disappear

Actual Result:

'Send' button flickers and disappears

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.37.3

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail:

Email or phone of affected tester (no customers):

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug6118759_Screen_Recording_20230707_014005_Chrome.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017913f22666496afa
• Upwork Job ID: 1678511813762625536
• Last Price Increase: 2023-07-10

[melvin-bot]

Triggered auto assignment to @adelekennedy (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[dukenv0307]

Proposal

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

Chat - Send button disappears when 'No internet connection' banner appears on top of browser

What is the root cause of that problem?

1. In src/components/PDFView/index.js, we have a logic to toggle key board on small screen

if (!this.state.isKeyboardOpen && this.props.windowHeight < prevProps.windowHeight) {
            this.toggleKeyboardOnSmallScreens(true);
}

2. When internet connection is disabled in android chrome, this small text shows up

as a result _this.props.windowHeight < prevProps.windowHeight_ is evaluated to true

3. In this file: src/components/AttachmentModal.js: updateConfirmButtonVisibility function will hide the confirm button

const updateConfirmButtonVisibility = useCallback(
        (shouldFadeOut) => {
            setIsConfirmButtonDisabled(shouldFadeOut);
            const toValue = shouldFadeOut ? 0 : 1;

            Animated.timing(confirmButtonFadeAnimation, {
                toValue,
                duration: 100,
                useNativeDriver: true,
            }).start();
        },
        [confirmButtonFadeAnimation],
    );

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

In src/components/PDFView/index.js, we should update the toggleKeyboardOnSmallScreens logic in componentDidMount like this:

componentDidUpdate(prevProps) {
        // Use window height changes to toggle the keyboard. To maintain keyboard state
        // on all platforms we also use focus/blur events. So we need to make sure here
        // that we avoid redundant keyboard toggling.
        if (!this.state.isKeyboardOpen && this.props.windowHeight < prevProps.windowHeight - 100) {
            this.toggleKeyboardOnSmallScreens(true);
        } else if (this.state.isKeyboardOpen && this.props.windowHeight > prevProps.windowHeight) {
            this.toggleKeyboardOnSmallScreens(false);
        }
    }

Note: This works with 100px, but I think we could discuss more to find a more suitable number

What alternative solutions did you explore? (Optional)

[adelekennedy]

I'm not able to reproduce but this is an annoying bug

[melvin-bot]

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

[melvin-bot]

Current assignee @adelekennedy is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[adelekennedy]

not overdue

[allroundexperts]

Reviewing today!

[allroundexperts]

@dukenv0307's proposal looks good to me. I think we forgot to take into account the offline indicator showing up when implementing this.

I think prevProps.windowHeight - 100 seems fair enough to me since the virtual keyboard height would be more than this in most cases.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @allroundexperts Please request via NewDot manual requests for the Reviewer role ($1000)

[melvin-bot]

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

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 📖

[dukenv0307]

@allroundexperts The PR is ready to review.

[adelekennedy]

Not overdue - waiting for PR review!

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.43-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: Send button does not appear when the internet connection is disabled #22981

If no regressions arise, payment will be issued on 2023-07-28. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

• External issue reporter N/A
• Contributor that fixed the issue @dukenv0307
• Contributor+ that helped on the issue and/or PR @allroundexperts

For reference, here are some details about the assignees on this issue:

• @allroundexperts does not require payment (Eligable for Manual Requests)
• @dukenv0307 requires payment

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

• Merged PR within 3 business days of assignment - 50% bonus
• Merged PR more than 9 business days after assignment - 50% penalty

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allroundexperts] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allroundexperts] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allroundexperts] Determine if we should create a regression test for this bug.
• [@allroundexperts] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@adelekennedy] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[allroundexperts]

Checklist

1. Frenkield 8595 pdf password #9141
2. https://github.com/Expensify/App/pull/9141/files#r1278675659
3. https://expensify.slack.com/archives/C049HHMV9SM/p1690768374931559
4. Regression test would be helpful here.

Regression test

1. Open any chat on mweb and add a pdf as a attachment.
2. Go offline.
3. Verify that the Send button is still visible.

Do we 👍 or 👎

[adelekennedy]

Payment Summary:

External issue reporter N/A
Contributor that fixed the issue - @dukenv0307 - $1000 + $500 3 day speed bonus paid in Upwork
Contributor+ that helped on the issue and/or PR - @allroundexperts $1000 + $500 3 day speed bonus to be paid in newdot

[JmillsExpensify]

Reviewed details for @allroundexperts. These details are accurate based on summary from Business Reviewer and are now approved for payment in NewDot.