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

[lanitochka17]

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:

1. Click on FAB > Start chat > room > workspace
2. 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?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

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

[yuetong3yu]

Feel like it's expected instead a bug.

[melvin-bot]

📣 @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:

1. Make sure you've read and understood the contributing guidelines.
2. 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.
3. 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.
4. 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>

[yuetong3yu]

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

[melvin-bot]

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