[$500] Context menu popup is not dismissed when opening Sign In Model in Incognito mode

[kbecciv]

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.3.85.0
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: @tranvantoan-qn
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697565108183509

Action Performed:

. Go to Incognito mode or log out of any account
2. Follow this public room's link: https://staging.new.expensify.com/r/5593084223054221
3. Click the Three Dots icon in the top-right corner of the page.
4. Select either "Pin," "Zoom," or "Google Meet" from the menu.
5. Observe that: the context menu keeps opening and overlays the Sign-up Modal.

Expected Result:

The context menu popup should close after selecting any option. So the users can use Sign-up Modal

Actual Result:

The context menu keeps opening and overlays the Sign-up Modal

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

Android: Native

Android.-.Native.3.mov

Android: mWeb Chrome

Android.-.Chrome.3.mov

iOS: Native

iOS.-.Native.3.MP4

iOS: mWeb Safari

RPReplay_Final1697576834.MP4

MacOS: Chrome / Safari

MacOS.-.Chrome.mov

MacOS.-.Safari.3.mov

Recording.5051.mp4

MacOS: Desktop

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~015958dd4a7d354810
• Upwork Job ID: 1714388653820784640
• Last Price Increase: 2023-10-17

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~015958dd4a7d354810

[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

[melvin-bot]

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

[ZhenjaHorbach]

Proposal

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

Context menu popup is not dismissed when opening Sign In Model in Incognito mode

What is the root cause of that problem?

since the sign in screen is a modal
It does not unmount the previous screen in any way
In which the ThreeDotsMenu is still open

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

I think we should update the menu and add
To be sure that ThreeDotsMenu will be closed when moving to new screens

    const isFocused = useIsFocused();

    React.useEffect(() => {
        if (!isFocused) {
            setPopupMenuVisible(false);
        }
    }, [isFocused]);

App/src/components/ThreeDotsMenu/index.js

Lines 66 to 79 in 0cfbec0

	function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay}) {
	const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
	const buttonRef = useRef(null);
	const {translate} = useLocalize();
	const showPopoverMenu = () => {
	setPopupMenuVisible(true);
	};
	const hidePopoverMenu = () => {
	setPopupMenuVisible(false);
	};
	return (

What alternative solutions did you explore? (Optional)

NA

[graylewis]

Proposal

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

When an anonymous user is signed in and uses the three dot menu to select a video conferencing option, the sign in modal is shown but the three dot menu is not dismissed.

What is the root of the issue

When the menu item is selected, it triggers the checkIfActionIsAllowed function which interrupts the flow of the logic and redirects the user to the sign in modal. Since the logic of the menu items' selection never gets to the part where it dismisses the popover, the popover is left open.

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

There is an existing pattern to handle this issue. On the floating action button, the menu items' onSelected callback uses the interceptAnonymousUsers to handle this logic inside of the component. We could use this pattern to hide the popover before the redirect occurs.

What alternative solutions did you explore? (Optional)
NA

[olalekanteeblaze]

Proposal

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

When an anonymous user tries click on any of the items on the Three dot menu, it redirects and open the sign in modal without closing the the popover opened by the three dot menu, thereby blocking the sign in modal

What is the root cause of that problem?

The cause of the issue is that when any of the item in the popover menu is clicked, it's intercepted by a checkIfActionIsAllowed function which redirects to the sign in page (opens the sign in modal) when the user is anonymous or the action isn't allowed. The function that actually close the popover is only called when the action is allowed.

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

By updating the checkIfActionIsAllowed function to accept a third optional argument called notAllowedCallback, we can pass a callback that actually closes the popover before opening the sign in modal

What alternative solutions did you explore? (Optional)

N/A

[melvin-bot]

📣 @olalekanteeblaze! 📣
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>

[olalekanteeblaze]

Contributor details
Your Expensify account email: Olalekanteeblaze@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~0119e461c83372a840

[melvin-bot]

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

[ayazalavi]

Proposal

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

in case of anonymous user, three dots menu doesnt gets closed when you select an item

What is the root cause of that problem?

The root cause is that the code is preventing the menu item callback from executing when the popover item is clicked due to a condition at this location:

App/src/components/MenuItem.js

Line 143 in f0d2d08

onPress={Session.checkIfActionIsAllowed((e) => {

Popover closed for anonymous user is not implemented

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

Implement a utility method that handles a click/tap event anywhere on the page where it runs a callback for anonymous users only, allowing us to pass the close popover method.

What alternative solutions did you explore? (Optional)

N/A

[bernhardoj]

Should be fixed by #29653

[laurenreidexpensify]

@narefyev91 do you agree ^^

[tranvantoan-qn]

Did you test it on main or staging?

[narefyev91]

@laurenreidexpensify ops mixed up with other issue which was also related to menu #28324
Let me check if that still happened

[narefyev91]

Tested on latest main not repro:

Screen.Recording.2023-10-18.at.12.28.40.mov