[HOLD for payment 2023-03-01] [$1000] Android - Keyboard is not dismissed after tapping outside of email input

[kbecciv]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Open NewDot app
2. Tap email input box
3. Tap outside of email input

Expected Result:

Keyboard should be dismissed

Actual Result:

Keyboard is not dismissed after tapping outside of email input
Verify that it does not revert this issue - #13920 (comment)
The language picker should still be clickable in sign in page

Workaround:

Unknown

Platforms:

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

• Android / native

Version Number: 1.2.59.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/3101971

Email or phone of affected tester (no customers):

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

Notes/Photos/Videos: Any additional supporting documentation

Bug5911751_Screenrecorder-2023-01-25-20-05-33-421-1.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/~010f80df51934e8bf6
• Upwork Job ID: 1620601345048166400
• Last Price Increase: 2023-02-01

[mateocole]

This looks like something we will want to fix, tagging engineering to take a look

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

I think this is expected #13920 (comment).

[situchan]

This came from #13954 and I agree with @bernhardoj.
In android, keyboard can be dismissed using device back button so it's not affecting user experience.
cc: @jasperhuangg @tgolen

[mollfpr]

Thanks, @bernhardoj and @situchan! Let’s wait for the clarification.

[vitaliygerasymchuk]

Hello. As stated above - this is expected behavior. But still it can be improved.
The solution:

After the touch event - we get the focused view, remove focus from it and hide the keyboard.

[RUPESH1439]

PROPOSAL:

1. Wrap the screen component using TouchableWithoutFeedback with onPress handler to dismiss the active keyboard as (Keyboard.dismiss)

Code sample:

<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
      <View style={styles.container}>
        {/* Your content here */}
      </View></TouchableWithoutFeedback>

[akhilesh-mourya]

PROPOSAL:
We will have to wrap the input form inside KeyboardAwareScrollViewContainer according to this npm wrapper:
https://github.com/APSL/react-native-keyboard-aware-scroll-view

this is a maintained library with thousands of stars

We can also use Formik for form validation and other handlings.

[Naishadh8115]

PROPOSAL :
@mateocole There is one file missing for android index.android.js in one component called in TouchableDismissKeyboard. I have tested it by running it. I can help with this issue. I have fixed it at my end on android.

[thuyle04]

PROPOSAL
We can edit file index.js same as content of file index.ios.js . It uses TouchableWithoutFeedback and event onPress to dismiss keyboard when touching outside email input.

Files are fixed

[mollfpr]

@bernhardoj @situchan I think we should make the same behavior on native platforms, no?

@thienlnam What do you think about the comments #14569 (comment) and #14569 (comment)? Are we going close this or continue to fix the issue?

[Naishadh8115]

PROPOSAL : @mateocole There is one file missing for android index.android.js in one component called in TouchableDismissKeyboard. I have tested it by running it. I can help with this issue. I have fixed it at my end on android.
As mentioned above #14569 (comment)

Screen_Recording_20230202_175644_New.Expensify.mp4

[thienlnam]

@mollfpr

I agree with you here, I see that it was removed to fix this

This is some weird quirk with RNPickerSelect where when you enclose them with Touchables it makes them untouchable

But like you mentioned, our philosophy is that it should be expected to work the same way on all platforms so we should figure out another fix for this

Whatever proposal you accept should also verify that the language picker is still clickable on the sign in page

[situchan]

Proposal:

It doesn't make sense that we make use of touchable onPress feature when keyboard is not shown.

Make changes in TouchableDismissKeyboard component:

• rename index.ios.js to index.native.js
• In new index.native.js:

const TouchableDismissKeyboard = (props) => {
    const dismissKeyboardWhenTappedOutsideOfInput = () => {
-       if (!props.isKeyboardShown) {
-           return;
-       }
        Keyboard.dismiss();
    };

    return (
-       <TouchableWithoutFeedback onPress={dismissKeyboardWhenTappedOutsideOfInput}>
+       <TouchableWithoutFeedback disabled={!props.isKeyboardShown} onPress={dismissKeyboardWhenTappedOutsideOfInput}>
            {props.children}
        </TouchableWithoutFeedback>
    );
};

[MelvinBot]

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

[MelvinBot]

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

• fix "Android - Keyboard is not dismissed after tapping outside of email input" #15246

If no regressions arise, payment will be issued on 2023-03-01. 🎊

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
• Contributor that fixed the issue
• Contributor+ that helped on the issue and/or PR

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

[MelvinBot]

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:

• [@mollfpr / @thienlnam] The PR that introduced the bug has been identified. Link to the PR:
• [@mollfpr / @thienlnam] 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:
• [@mollfpr / @thienlnam] 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:
• [@situchan] Propose regression test steps to ensure the same bug will not reach production again.
• [@mateocole] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[mollfpr]

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:

• [@mollfpr / @thienlnam] The PR that introduced the bug has been identified. Link to the PR: Allow sign in page picker to be touchable everywhere on Android #13954
• [@mollfpr / @thienlnam] 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: Allow sign in page picker to be touchable everywhere on Android #13954 (comment)
• [@mollfpr / @thienlnam] 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: This issue is expected in here so no need open a discussion.

[mollfpr]

@situchan could you propose the regression test?

[situchan]

Regression Test Proposal

• Bug: [Android] Keyboard is not dismissed after tapping outside of email input

• Proposed Test Steps:

  • Open NewDot app
  • Logout if already logged in
  • Tap email input box on Login page
  • Tap outside of email input
  • Verify that keyboard is dismissed

• Bug: [Android] Sign in - Language picker is not clickable in sign in page

• Proposed Test Steps:

  • Open NewDot app
  • Logout if already logged in
  • Tap email input box on Login page
  • Tap language picker at the bottom
  • Verify that language dropdown shows directly

• Do we agree 👍 or 👎

[mollfpr]

👍

[MelvinBot]

@mollfpr, @mateocole, @thienlnam, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@mollfpr, @mateocole, @thienlnam, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mollfpr]

Bump @mateocole

[thienlnam]

Adding a note here for Matt, this issue is also eligible for the 50% bonus

(We updated the solution later but it was still within 3 business days that it was decided so all good)

[mateocole]

creating a regression test!

[mateocole]

@situchan and @mollfpr just to confirm you have not applied for an upwork job yet, correct?

[situchan]

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

@mateocole This job is expired so cannot apply. Can you please post new job and invite me?

[mateocole]

Try this link: https://www.upwork.com/jobs/~013f0c8f0725034222

[situchan]

@mateocole applied. Thank you

[mateocole]

Okay! Contracts sent

[mateocole]

Alright both payments sent with bonus!