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

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:

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

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

@alexpensify

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

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

I'm OOO today but will test soon

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

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

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

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

@alexpensify

@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

@alexpensify

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

Issue can still be still replicated.

That issue was completed weeks ago, I think it's better to create a fresh new issue and I can post my proposal there.

@madmax330

@honnamkuan, @madmax330, @alexpensify, @situchan 10 days overdue. I'm getting more depressed than Marvin.

@kavimuru

@kavimuru - can you please create a new GH for this one? Thanks!

@madmax330

@honnamkuan, @madmax330, @alexpensify, @situchan 12 days overdue now... This issue's end is nigh!

This one is not overdue, we need a new issue created.

Closing - I started a discussion here and requested a new GH be created for the remaining issue.

https://expensify.slack.com/archives/C049HHMV9SM/p1741048476350409

@bernhardoj

@bernhardoj the new GH is here:

#57758 (comment)

🚨 Heads up! I'll be offline until Wednesday, March 12, 2025, and won’t be actively monitoring this GitHub during that time.

If this GitHub requires an urgent update, please reapply the bug label or reach out in the #expensify-open-source Slack room for help. Otherwise, I'll pick things up when I'm back online. Thanks!

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Bug0 Triage Checklist (Main S/O)

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

74 remaining items

🚨 Heads up! I'll be offline until Wednesday, March 12, 2025, and won’t be actively monitoring this GitHub during that time.

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Oct 6, 2023

melvin-bot commented on Oct 6, 2023

Bug0 Triage Checklist (Main S/O)

alexpensify commented on Oct 9, 2023

alexpensify commented on Oct 11, 2023

alexpensify commented on Oct 13, 2023

hnkuanx commented on Oct 14, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

alexpensify commented on Oct 16, 2023

hnkuanx commented on Oct 16, 2023

hnkuanx commented on Oct 23, 2023

74 remaining items

bernhardoj commented on Feb 14, 2025

melvin-bot commented on Feb 17, 2025

alexpensify commented on Feb 19, 2025

melvin-bot commented on Feb 19, 2025

alexpensify commented on Feb 19, 2025

alexpensify commented on Mar 4, 2025

alexpensify commented on Mar 5, 2025

alexpensify commented on Mar 5, 2025

🚨 Heads up! I'll be offline until Wednesday, March 12, 2025, and won’t be actively monitoring this GitHub during that time.

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions