[Payment due][$1000] Room - Side panel does not close when clicking outside of panel

@kadiealexander

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

Version Number: 1.4.24-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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

Click on FAB > Start chat > room > workspace
Click outside of the side panel

Expected Result:

Side panel should close as it does when clicking on outside of the panel anywhere in the app

Actual Result:

Side panel stays open but navigates one step back

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6339423_1705008289448.clickingOnOutsideBoxRoom.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~011ab450f9ef4bcadd
Upwork Job ID: 1745558199758635008
Last Price Increase: 2024-02-21
Automatic offers:

hoangzinh | Reviewer | 28104675
neonbhai | Contributor | 28104676
Krishna2323 | Contributor | 28142924

Issue Owner

Current Issue Owner: @kadiealexander

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

@kadiealexander

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

@hoangzinh

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

Proposal

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

Room - Side panel does not close when clicking outside of panel

What is the root cause of that problem?

We are only hiding picker modal when onClose is called inside ValuePicker.

App/src/components/ValuePicker/index.js

Lines 59 to 61 in 63ed47d

    
           const hidePickerModal = () => { 
        
               setIsPickerVisible(false); 
        
           };

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

Option 1:
We need to modify ValueSelectorModal to accept a callback for onBackdropPress event also and then we will pass a function that calls Navigation.dismissModal() when onBackdropPress event is fired inside ValueSelectorModal. We also need to introduce onBackdropPress callback prop inside BaseModal.

Option 2:
Or we can use onBackButtonPress on HeaderWithBackButton to hide the valuePicker and use onClose to dismiss modal using Navigation.dismissModal() or Navigation.goBack(), inside ValueSelectorModal we can separate logic.

Option 3:
We will pass a callback to BaseModal directly from ValueSelectorModal that will run on backdropPress and will call Navigation.dismissModal() or Navigation.goBack(). Still we need to add a onBackdropPress prop inside BaseModal. We will be passing the callback to BaseModal as a default value. Like we did it here:

App/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

Lines 28 to 36 in b6a18b1

    
           <Overlay 
        
               onPress={() => { 
        
                   if (isExecutingRef.current) { 
        
                       return; 
        
                   } 
        
                   isExecutingRef.current = true; 
        
                   navigation.goBack(); 
        
               }} 
        
           />

Result

workspace_modal_hide.mp4

Alternative:

We will make this a page on the RHP (Exactly like #26742). We will:

Define a route in ROUTE.ts
Add it to ModalStackNavigators.tsx and to linkingConfig.js
And move the content that's inside the modal into the new page that can be pushed on the RHP stack.
We will use URL encoding to share the data

Feel like it's expected instead a bug.

@yuetong3yu

📣 @yuetong3yu! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

Make sure you've read and understood the contributing guidelines.
Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

Contributor details
Your Expensify account email: yuetong3yu@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~019f5d35fda67374fb

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

@Krishna2323

Since there was a regression, reducing the payment by 50% as per the contributing guidelines.

Payouts due:

Contributor: $500 @Krishna2323 (offer)
Contributor+: $500 @hoangzinh (offer)

Upwork job is here.

@danieldoglas

@danieldoglas @kadiealexander @hoangzinh, IMO there should be no reduction in payment since the regression was minor and we ended up doing nothing there. I have put a lot of effort into this issue, first in this PR, then in the second PR, and then I have invested a lot of time into the PR to fix the regression, which had no straightforward solution because we didn't want to create separate screens. See #38665 (comment). Pls correct me if I'm wrong here 🙃

@danieldoglas

@danieldoglas I'll let you decide if the regression penalty should apply here, as I don't have the technical understanding to know if the regression was true.

I agree we can't skip the reduction because of the effort applied.

Thanks Daniel!

Navigation Menu

Repository navigation

[Payment due][$1000] Room - Side panel does not close when clicking outside of panel #34394

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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?

Result

Alternative:

105 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<Overlay
	onPress={() => {
	if (isExecutingRef.current) {
	return;
	}
	isExecutingRef.current = true;
	navigation.goBack();
	}}
	/>

[Payment due][$1000] Room - Side panel does not close when clicking outside of panel #34394

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 11, 2024

melvin-bot commented on Jan 11, 2024

melvin-bot commented on Jan 11, 2024

Krishna2323 commented on Jan 11, 2024

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?

Result

Alternative:

yuetong3yu commented on Jan 11, 2024

melvin-bot commented on Jan 11, 2024

yuetong3yu commented on Jan 12, 2024

melvin-bot commented on Jan 12, 2024

105 remaining items

kadiealexander commented on May 15, 2024

Krishna2323 commented on May 15, 2024

kadiealexander commented on May 15, 2024

danieldoglas commented on May 17, 2024

kadiealexander commented on May 20, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions