[HOLD for payment 2023-09-27] [$500] Workspaces - Auto select member after invite

@namhihi237

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:

Create a WS
Go to members and invite some members (about 3 members)
Select 1 member
Click invite again and search new member
Press enter some times (important: about 3-4 times)
Click member to invite
Click next
Click invite, observe some members was selected.

Expected Result:

No select member after invite

Actual Result:

auto select member after invite

Workaround:

Unknown

Platforms:

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

Version Number: v1.3.62-4

Reproducible in staging?: Y

Reproducible in production?: Y

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

Screen.Recording.2023-08-25.At.20.47.37.mp4

bandicam.2023-09-04.19-29-39-215.mp4

Expensify/Expensify Issue URL:

Issue reported by: @namhihi237

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692971244708429

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~011a838c373f60f807
Upwork Job ID: 1700169777562968064
Last Price Increase: 2023-09-08
Automatic offers:

bernhardoj | Contributor | 26648637
namhihi237 | Reporter | 26648640

@michaelhaxhiu

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

Proposal

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

Pressing enter in the workspace invite message page and select the member in the members' page.

What is the root cause of that problem?

Both workspace members and invite member pages use SelectionList to show the list. SelectionList subscribe to enter key to select/toggle the member selection. When the screen is out of focus, in this case, we go to the invite message page, the keyboard subscription is still active.

App/src/components/SelectionList/BaseSelectionList.js

Lines 287 to 299 in b95c1dd

    
           /** Selects row when pressing Enter */ 
        
           useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { 
        
               captureOnInputs: true, 
        
               shouldBubble: () => !flattenedSections.allOptions[focusedIndex], 
        
               isActive: !activeElement, 
        
           }); 
        
           /** Calls confirm action when pressing CTRL (CMD) + Enter */ 
        
           useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm, { 
        
               captureOnInputs: true, 
        
               shouldBubble: () => !flattenedSections.allOptions[focusedIndex], 
        
               isActive: Boolean(onConfirm), 
        
           });

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

In OptionsSelector, we already have a fix to unsubscribe the enter listener when the screen is out of focus, so we can apply the same solution.

App/src/components/OptionsSelector/BaseOptionsSelector.js

Lines 77 to 83 in b95c1dd

    
           if (prevProps.isFocused !== this.props.isFocused) { 
        
               if (this.props.isFocused) { 
        
                   this.subscribeToKeyboardShortcut(); 
        
               } else { 
        
                   this.unSubscribeFromKeyboardShortcut(); 
        
               } 
        
           }

In SelectionList, use useIsFocused hook to get the screen focus state and use it to disable the keyboard listener here:

App/src/components/SelectionList/BaseSelectionList.js

Lines 288 to 292 in b95c1dd

    
           useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, { 
        
               captureOnInputs: true, 
        
               shouldBubble: () => !flattenedSections.allOptions[focusedIndex], 
        
               isActive: !activeElement, 
        
           });

isActive: !activeElement && isFocused

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

@anmurali

Triggered auto assignment to @anmurali (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

@namhihi237

Nice job! Let's pay this now.

Bug reporter: $250 @namhihi237 (reported aug 25 which is 5 days before the bug bounty price changed to $50)
Contributor: $750 @bernhardoj (50% bonus)
C+: $750 @sobitneupane (50% bonus) please request via newdot

@sobitneupane

@sobitneupane let us know after you request payment please, so I can close this GH :)

@joekaufmanexpensify

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

@sobitneupane

I'm re-assigning this to another BZ as part of my preparation for Sabbatical (starting Friday).

Next steps:

Wait for @sobitneupane to confirm he requested payment and received it.
Close this GH

@sobitneupane

@sobitneupane tracks these in his end, so no need to leave this one open for now. We just need to issue payment once he requests it!

#26667 (comment)

Requested payment on newDot.

@sobitneupane

$750 payment approved for @sobitneupane based on BZ summary.

Navigation Menu

Repository navigation

[HOLD for payment 2023-09-27] [$500] Workspaces - Auto select member after invite #26667

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?

33 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	/** Selects row when pressing Enter */
	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.ENTER, selectFocusedOption, {
	captureOnInputs: true,
	shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
	isActive: !activeElement,
	});

	/** Calls confirm action when pressing CTRL (CMD) + Enter */
	useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.CTRL_ENTER, onConfirm, {
	captureOnInputs: true,
	shouldBubble: () => !flattenedSections.allOptions[focusedIndex],
	isActive: Boolean(onConfirm),
	});

	if (prevProps.isFocused !== this.props.isFocused) {
	if (this.props.isFocused) {
	this.subscribeToKeyboardShortcut();
	} else {
	this.unSubscribeFromKeyboardShortcut();
	}
	}

[HOLD for payment 2023-09-27] [$500] Workspaces - Auto select member after invite #26667

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Activity

melvin-bot commented on Sep 4, 2023

melvin-bot commented on Sep 4, 2023

Bug0 Triage Checklist (Main S/O)

bernhardoj commented on Sep 5, 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?

melvin-bot commented on Sep 8, 2023

melvin-bot commented on Sep 8, 2023

33 remaining items

michaelhaxhiu commented on Sep 27, 2023

michaelhaxhiu commented on Sep 27, 2023

melvin-bot commented on Sep 28, 2023

michaelhaxhiu commented on Sep 28, 2023

joekaufmanexpensify commented on Sep 29, 2023

sobitneupane commented on Oct 9, 2023

JmillsExpensify commented on Oct 9, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions