[HOLD for payment 2024-01-18] [$500] Group - Closed keyboard opens again after adding a user to a group

[lanitochka17]

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 iOS or Android App
2. Login with any account
3. Tap on FAB
4. Tap on "Send Message"
5. Tap on the search input so the keyboard is opened
6. Select a any user tapping on "Add to group"
7. Verify the keyboard is not closed or reopened after selecting an user
8. Close the keyboard by defocusing the input
9. Select a member

Expected Result:

Keyboard is NOT opened again

Actual Result:

Keyboard opens again

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

Bug6227636_1696603414371.iOS-closed-keyboard-open-after-add-user.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/~01efe6ff17fc35d91a
• Upwork Job ID: 1727102793349758976
• Last Price Increase: 2023-12-05
• Automatic offers:
• situchan | Contributor | 28012342
• honnamkuan | Contributor | 28066723

Issue Owner

Current Issue Owner: @honnamkuan

[melvin-bot]

Triggered auto assignment to @alexpensify (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

[alexpensify]

I'm OOO today but will test soon

[alexpensify]

Still on my testing list, other GHs have taken priority.

[alexpensify]

I've run out of time and will have to test over the weekend.

[honnamkuan]

Proposal

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

On mobile devices native app, whenever user click on "Add to group" button in Send Message page, the search input is refocused, and opens up the keyboard.
If user click on the screen to dismiss the keyboard and click on "Add to group", again the keyboard pops up.

That causes unpleasant UX for user who would like to add several people to a group, but the recipient list is partially blocked by the keyboard.

This issue does not happen in mobile browsers.

What is the root cause of that problem?

Currently in BaseOptionsSelector.js we have props.shouldPreventDefaultFocusOnSelectRow which should be:

• set to true if we want to prevent focus on the row, and apply refocus on the search text input upon row click.
• set to false if we want to allow focus on the row, and do not focus on search text input.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 357 to 358 in fe282b4

	addToSelection(option) {
	if (this.props.shouldShowTextInput && this.props.shouldPreventDefaultFocusOnSelectRow) {

In NewChatPage.js, it is now passed in as shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}

App/src/pages/NewChatPage.js

Line 214 in fe282b4

shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}

This works well to prevent input refocusing on mobile device browser, but not native platforms i.e IOS / Android, because Browser.isMobile() would returns false for native platform, applying ! on it means we have shouldPreventDefaultFocusOnSelectRow={true}.
Hance whenever the "Add to group" button is pressed, the search input is refocussed, and keyboard pops out.

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

We need to change

App/src/pages/NewChatPage.js

Line 214 in fe282b4

shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}

From shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()} to shouldPreventDefaultFocusOnSelectRow={!DeviceCapabilities.canUseTouchScreen()}

That will allow search input refocusing for Desktop/Web, but disable it for Mobile Web / IOS / Android.

Identifical changes should be applied to other pages which is currently using shouldPreventDefaultFocusOnSelectRow={!Browser.isMobile()}

What alternative solutions did you explore? (Optional)

I have considered using other option like isSmallScreenWidth , getPlatform as well. But I think it is cleaner to use canUseTouchScreen

[alexpensify]

Closing - I tested this experience on my Android device and was unable to replicate it.

[honnamkuan]

@alexpensify I am still able to reproduce the issue on latest main using Android and IOS.
Android recording for reference:

Screen.Recording.2023-10-16.at.5.21.37.PM.mov

For ease of comparison, here is how it is for mobile Chrome which is not affected by the reported bug.

Screen.Recording.2023-10-16.at.5.32.46.PM.mov

[honnamkuan]

@alexpensify just wondering if you manage to have a look at my comment above?

Issue can still be still replicated.

[alexpensify]

@honnamkuan - thanks for the bump, sorry I missed this one. I'll test again soon.

[alexpensify]

I haven't had time to test but will review when I'm back from OOO.

[izarutskaya]

Issue is reproducible on latest build - 1.4.1-4

RPReplay_Final1700545435.mp4

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@alexpensify, @eVoloshchak Huh... This is 4 days overdue. Who can take care of this?

[alexpensify]

@eVoloshchak - will the past proposals work to fix this issue? Thanks for reviewing.

[alexpensify]

Heads up, I will be offline from Friday, December 22, to Thursday, January 4, 2024. I will not be actively watching over this GitHub during that period. If anything urgent is needed here, please ask for help in the #expensify-open-source Slack Room-- thanks!

[alexpensify]

I'm back online again and it looks like this PR is moving along.

[alexpensify]

Just waiting for this PR to go into production now.

[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.4.24-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Disable focusing on text input when select option row using touch screen device #33584

If no regressions arise, payment will be issued on 2024-01-18. 🎊

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

• @honnamkuan requires payment automatic offer (Contributor)
• @situchan requires payment automatic offer (Contributor)

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

• [@situchan] The PR that introduced the bug has been identified. Link to the PR:
• [@situchan] 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:
• [@situchan] 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] Determine if we should create a regression test for this bug.
• [@situchan] 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.
• [@alexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[alexpensify]

To prepare for the payment date, @situchan - can you please update the checklist:

#29003 (comment)

Thanks!

[situchan]

This was inconsistency between platforms rather than bug and implemented the way it is from the beginning.
No PR caused regression.
As this was caught by QA team, we can skip regression test.

[alexpensify]

Here is the payment summary:

• External issue reporter N/A
• Contributor that fixed the issue - @honnamkuan $500
• Contributor+ that helped on the issue and/or PR - @situchan $500

Upwork Job: https://www.upwork.com/jobs/~01efe6ff17fc35d91a

[alexpensify]

Alright, everyone has been paid in Upwork. Closing!

[kavimuru]

Issue is still reproducible

keyboard.issue.mp4

[alexpensify]

@honnamkuan or @situchan can you look into @kavimuru's update? Was this update reverted or are these issues not related? Thank you!

[alexpensify]

Waiting for feedback here

[melvin-bot]

@honnamkuan, @madmax330, @alexpensify, @situchan Eep! 4 days overdue now. Issues have feelings too...

[bernhardoj]

It was caused by #54994 where we always focus on the text input after selecting a user.

App/src/pages/NewChatPage.tsx

Lines 217 to 218 in 48520ec

	selectionListRef.current?.focusTextInput();
	setSelectedOptions(newSelectedOptions);

We need to conditionally focus it with the same condition of shouldPreventDefaultFocusOnSelectRow.

App/src/pages/NewChatPage.tsx

Line 362 in 48520ec

shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}

should I create a proposal?