Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2023-10-30] [$500] Web - Right click popup is stuck on search page open #27244

Closed
1 of 6 tasks
kbecciv opened this issue Sep 12, 2023 · 76 comments
Closed
1 of 6 tasks
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 Engineering External Added to denote the issue can be worked on by a contributor

Comments

@kbecciv
Copy link

kbecciv commented Sep 12, 2023

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!


Action Performed:

  1. Open the app
  2. Open any report
  3. Right click on any message to open popup
  4. Click on 'Add reaction' in popup
  5. Again right click on same message to again open popup
  6. Click CTRL+K/ CMD+K and observe that popup is stuck and displayed along with search page

Expected Result:

App should close the right click popup before opening search page

Actual Result:

App does not close right click popup before opening search page if we follow specified steps

Workaround:

Unknown

Platforms:

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

  • Android / native
  • Android / Chrome
  • iOS / native
  • iOS / Safari
  • MacOS / Chrome / Safari
  • MacOS / Desktop

Version Number: 1.3.68.12
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

right.click.popup.not.dismissed.on.search.page.open.mp4
Recording.4409.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694190244716599

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~012411f85dfeed7435
  • Upwork Job ID: 1701568949405835264
  • Last Price Increase: 2023-10-03
  • Automatic offers:
    • mollfpr | Reviewer | 27108241
    • tsa321 | Contributor | 27108242
    • dhanashree-sawant | Reporter | 27108243
@kbecciv kbecciv added External Added to denote the issue can be worked on by a contributor Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Sep 12, 2023
@melvin-bot melvin-bot bot changed the title Web - Right click popup is stuck on search page open [$500] Web - Right click popup is stuck on search page open Sep 12, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 12, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Sep 12, 2023

Job added to Upwork: https://www.upwork.com/jobs/~012411f85dfeed7435

@melvin-bot
Copy link

melvin-bot bot commented Sep 12, 2023

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 melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 12, 2023
@melvin-bot
Copy link

melvin-bot bot commented Sep 12, 2023

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

@melvin-bot
Copy link

melvin-bot bot commented Sep 12, 2023

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

@nahid633
Copy link
Contributor

nahid633 commented Sep 12, 2023

Proposal

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

Web - Right click popup is stuck on search page open

What is the root cause of that problem?

in PopoverWithMeasuredContent there is not click outside function.Therefore, whenever you click outside it stays there.

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

so basically we need to hideModal when there is some action outside.this popover uses PopoverWithMeasuredContent
by adding onPressOut={this.hideContextMenu} it will solve the problem
in src/pages/home/report/ContextMenu/PopoverReportActionContextMenu.js

What alternative solutions did you explore? (Optional)

we can add.
onPressOut={hideModal} to ReactNativeModal for all modals use ReactNativeModal in src/components/Modal/BaseModal.js

@paultsimura
Copy link
Contributor

paultsimura commented Sep 12, 2023

Proposal

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

If the context menu on ReportItem was opened after the EmojiPicker (or FAB), the cmd+k (open search) doesn't close the context menu modal.

What is the root cause of that problem?

While opening the context menu when the EmojiPicker is open, we have a race condition:

  1. The ContextMenu opens
  2. The EmojiPicker / FAB closes

Why?
In PopoverProvider, we have a listener for the contextmenu event (right-click) that should close the active popover. If you right-click somewhere outside the ReportActionItem, this listener works correctly.

React.useEffect(() => {
const listener = (e) => {
if (!activePopoverRef.current || !activePopoverRef.current.ref || !activePopoverRef.current.ref.current || activePopoverRef.current.ref.current.contains(e.target)) {
return;
}
closePopover();
};
document.addEventListener('contextmenu', listener);
return () => {
document.removeEventListener('contextmenu', listener);
};
}, [closePopover]);

However, in the PressableWithSecondaryInteraction we call e.stopPropagation() on the contextmenu event, which prevents the listener from being executed.

e.stopPropagation();
if (this.props.preventDefaultContextMenu) {
e.preventDefault();
}

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

Since right-click interaction with PressableWithSecondaryInteraction is the only place where we call e.stopPropagation() on the contextmenu event, I recommend the following:

  1. Along with stopping propagation of the contextmenu event, fire a custom event:
+       document.dispatchEvent(new CustomEvent("secondaryinteractioncontextmenu"));
        e.stopPropagation();
        if (this.props.preventDefaultContextMenu) {
            e.preventDefault();
        }
  1. In PopoverContextProvider, attach the listener of the contextmenu event to our custom event as well:
    React.useEffect(() => {
        const listener = (e) => {
            if (!activePopoverRef.current || !activePopoverRef.current.ref || !activePopoverRef.current.ref.current || activePopoverRef.current.ref.current.contains(e.target)) {
                return;
            }
            closePopover();
        };
        document.addEventListener('contextmenu', listener);
+       document.addEventListener('secondaryinteractioncontextmenu', listener);
        return () => {
            document.removeEventListener('contextmenu', listener);
+           document.removeEventListener('secondaryinteractioncontextmenu', listener);
        };
    }, [closePopover]);
  • This will ensure the contextmenu event is not bubbling up (as opposed to my previous suggestion to remove the e.stopPropagation) while the same listener will still be executed.
  • Such approach fixes the modal issue with right-click once and for all places where a custom context menu is opened with a right-click.
custom-context-menu-event.mp4

What alternative solutions did you explore? (Optional)

@mollfpr
Copy link
Contributor

mollfpr commented Sep 12, 2023

in PopoverWithMeasuredContent there is not click outside function.Therefore, whenever you click outside it stays there.

@nahid633 I don't understand this, and why this issue is only reproduced after the second right-click?

@paultsimura
Copy link
Contributor

@mollfpr I've just updated my proposal with all the related videos, so now it's the final version, sorry for a couple of edits.

@mollfpr
Copy link
Contributor

mollfpr commented Sep 12, 2023

@paultsimura It seems you have the correct RCA. Could you elaborate on the proposed solution and why calling the hideEmojiPicker will fix the issue?

@paultsimura
Copy link
Contributor

@mollfpr sure. This will eliminate the race condition – by calling EmojiPickerAction.hideEmojiPicker(false) we are explicitly calling the setIsOpen(false) on EmojiPicker's PopoverContextProvider before opening the ContextMenu popover.

So now the flow is correct:

  1. Close EmojiPicker
  2. Open ContextMenu
1.New.Expensify.-.12.September.2023.1.mp4

@Pluto0104
Copy link
Contributor

I don't think this is correct solution.

@mollfpr
Copy link
Contributor

mollfpr commented Sep 12, 2023

@Pluto0104 Why is that?

@Pluto0104
Copy link
Contributor

@mollfpr I'm looking for the best solution. of course, @paultsimura's solution might handle this issue. could you please give me some time?

@Pluto0104
Copy link
Contributor

Pluto0104 commented Sep 13, 2023

Proposal

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

After opening a left-click popover, if we open a right-click popover, the right-click popover gets stuck when we open RHP or the Keyboard Shortcut Modal using a keyboard shortcut.

What is the root cause of that problem?

The root cause is that various popovers, such as ReportActionItemContextMenu and FloatingActionButtonAndPopover, create a race condition. (If you're interested in understanding the race condition, please refer to the P.S. section.)

We set a keyboard shortcut listener in this code snippet:

const searchShortcutConfig = CONST.KEYBOARD_SHORTCUTS.SEARCH;
const groupShortcutConfig = CONST.KEYBOARD_SHORTCUTS.NEW_GROUP;
// Listen for the key K being pressed so that focus can be given to
// the chat switcher, or new group chat
// based on the key modifiers pressed and the operating system
this.unsubscribeSearchShortcut = KeyboardShortcut.subscribe(
searchShortcutConfig.shortcutKey,
() => {
Modal.close(() => {
if (Navigation.isActiveRoute(ROUTES.SEARCH)) {
return;
}
return Navigation.navigate(ROUTES.SEARCH);
});
},
searchShortcutConfig.descriptionKey,
searchShortcutConfig.modifiers,
true,
);
this.unsubscribeGroupShortcut = KeyboardShortcut.subscribe(
groupShortcutConfig.shortcutKey,
() => {
Modal.close(() => {
if (Navigation.isActiveRoute(ROUTES.NEW_GROUP)) {
return;
}
Navigation.navigate(ROUTES.NEW_GROUP);
});
},
groupShortcutConfig.descriptionKey,
groupShortcutConfig.modifiers,
true,
);

We close opened modals here:

This function closes the modal using the registered closeModal function:

function close(onModalCloseCallback, isNavigating = true) {
if (!closeModal) {
// If modal is already closed, no need to wait for modal close. So immediately call callback.
if (onModalCloseCallback) {
onModalCloseCallback();
}
onModalClose = null;
return;
}
onModalClose = onModalCloseCallback;
closeModal(isNavigating);
}

We set the function using the setCloseModal function here:

if (props.isVisible) {
props.onModalShow();
onOpen({
ref,
close: props.onClose,
anchorRef: props.anchorRef,
});
} else {
props.onModalHide();
close(props.anchorRef);
Modal.onModalDidClose();
}
Modal.willAlertModalBecomeVisible(props.isVisible);
Modal.setCloseModal(props.isVisible ? () => props.onClose(props.anchorRef) : null);

When a race condition occurs, as shown in this video, the app triggers the old modal close finally. In this case, we would invoke setCloseModal with null, so we can't close the modal using the keyboard shortcut.

27244-root-cause.mp4

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

To solve this problem, we need to close the modal here.

if (!onSecondaryInteraction) {
return;
}
e.stopPropagation();
if (preventDefaultContextMenu) {
e.preventDefault();
}
onSecondaryInteraction(e);

We can easily obtain the close function provided by PopoverProvider from PopoverContext using the useContext hook.

What alternative solutions did you explore? (Optional)

  • Option 1
    We need to add keyboard shortcut keys to this listener using useKeyboardShortcut function.
useKeyboardShortcut(CONST.KEYBOARD_SHORTCUTS.SEARCH, () => closePopover(), {shouldBubble: true});

This solution enables the closing of the popover when the search keyboard shortcut is pressed. Additionally, we have the option to incorporate the logic for both NEW_GROUP and SHORTCUT_MODAL.

  • Option 2
    Alternatively, I suggest changing the Modal action as follows:
let isOpenedBeforeCloseModal = false;

function setCloseModal(onClose) {
    if (onClose) {
        isOpenedBeforeCloseModal = !!closeModal;
        closeModal = onClose;
    } else if (isOpenedBeforeCloseModal) {
        isOpenedBeforeCloseModal = false;
    } else {
        closeModal = onClose;
    }
}

This function should work properly in normal cases and only work differently in the case of race conditions, as shown in this video:

27244-solution.mp4

Result

27244-web-chrome.mp4

P.S.

  • Why does this race condition occur when opening the context menu after opening a left click popover?

    The stopPropagation function in this code prevents the modal in the PopoverProvider from closing when the contextmenu event is triggered by a right click on the popover. As a result, the context menu is opened without closing the modal. Then, the isVisible state changes, causing other popovers to close.
  • Why doesn't the opposite scenario occur?
    In the case of opening a left-click popover, the click event is triggered. Since there's no stopPropagation, the context menu is closed before the left-click popover is opened. This sequence of events prevents the race condition from occurring in this scenario.
  • Why is stopPropagation necessary here?
    This prevents event bubbling when this component is nested. We want to ensure that both the nested and parent components do not trigger the action simultaneously.
    This scenario often arises with nested links in the message. When the context menu for a link is triggered, we don't want the message's context menu to override it.

@Pluto0104
Copy link
Contributor

@mollfpr could you please review ⬆️ ?

@mollfpr
Copy link
Contributor

mollfpr commented Sep 13, 2023

@paultsimura This issue isn't specific to the emoji picker. You can also reproduce it by opening the FAB menu.

Screen.Recording.2023-09-13.at.19.16.51.mov

After opening a left-click popup, if we open a right-click popup, the right-click popup gets stuck when we open RHP or the Keyboard Shortcut Modal using a keyboard shortcut.

@Pluto0104 I am trying to understand the race condition here between the left-click and right-click? Why does that happen? Why it's not stuck on the opposite?

@Pluto0104
Copy link
Contributor

@mollfpr I'm just curious about that 😄, but it seems that the FloatingActionButtonAndPopover opens after the ReportActionItemContextMenu is closed. I think the ReportActionItemContextMenu is simpler in terms of state management and component structure, so it appears to be faster. Therefore, I believe the opposite one is not as structured.

@mollfpr
Copy link
Contributor

mollfpr commented Sep 13, 2023

@Pluto0104, we should find the correct answer for that before moving forward.

@maddylewis maddylewis removed their assignment Sep 13, 2023
@paultsimura
Copy link
Contributor

Proposal

Updated proposal #27244 (comment)

@mollfpr I can provide more details on why the race condition happens, if needed.

@Pluto0104
Copy link
Contributor

@mollfpr, I believe I have identified the correct root cause, so I have updated my proposal. 😄 Please review it again.

@melvin-bot melvin-bot bot added the Weekly KSv2 label Oct 10, 2023
@tsa321
Copy link
Contributor

tsa321 commented Oct 10, 2023

PR is ready...

@tsa321
Copy link
Contributor

tsa321 commented Oct 17, 2023

Update: because there is other recent PR with a regression from other issue, my PR status is in HOLD until that PR is reverted.

@melvin-bot
Copy link

melvin-bot bot commented Oct 19, 2023

Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:

  • when @tsa321 got assigned: 2023-10-09 21:01:05 Z
  • when the PR got merged: 2023-10-19 17:57:44 UTC
  • days elapsed: 7

On to the next one 🚀

@melvin-bot melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 23, 2023
@melvin-bot melvin-bot bot changed the title [$500] Web - Right click popup is stuck on search page open [HOLD for payment 2023-10-30] [$500] Web - Right click popup is stuck on search page open Oct 23, 2023
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Oct 23, 2023
@melvin-bot
Copy link

melvin-bot bot commented Oct 23, 2023

Reviewing label has been removed, please complete the "BugZero Checklist".

@melvin-bot
Copy link

melvin-bot bot commented Oct 23, 2023

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.88-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

If no regressions arise, payment will be issued on 2023-10-30. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

  • External issue reporter
  • Contributor that fixed the issue
  • Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

  • Merged PR within 3 business days of assignment - 50% bonus
  • Merged PR more than 9 business days after assignment - 50% penalty

@melvin-bot
Copy link

melvin-bot bot commented Oct 23, 2023

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

  • [@cead22] The PR that introduced the bug has been identified. Link to the PR:
  • [@cead22] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
  • [@cead22] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
  • [@mollfpr / @tsa321] Determine if we should create a regression test for this bug.
  • [@mollfpr / @tsa321] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
  • [@kevinksullivan] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

@melvin-bot melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Oct 29, 2023
@kevinksullivan
Copy link
Contributor

Paid @dhanashree-sawant and @tsa321 . @mollfpr sent you an offer since the other job wasn't letting me pay. Lmk when you accept!

@melvin-bot melvin-bot bot removed the Overdue label Oct 31, 2023
@tsa321
Copy link
Contributor

tsa321 commented Oct 31, 2023

@kevinksullivan Thank you for the payment.
and I am sorry if I am rude, but Am I eligible for the bonus? since @mollfpr was sick when my PR is ready to be reviewed and also we are waiting for other PR to be reverted, so the PR reviewing is got delayed and also my PR fixes other issue as well. Thank you...

@mollfpr
Copy link
Contributor

mollfpr commented Oct 31, 2023

I'll complete the checklist soon. @kevinksullivan I'll do manual request in NewDot. Could you give the payment summary? Thank you!

@mollfpr
Copy link
Contributor

mollfpr commented Nov 1, 2023

The PR that introduced the bug has been identified. Link to the PR:

#19011

The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

https://github.com/Expensify/App/pull/19011/files#r1378575720

A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

The regression step should be enough.

Determine if we should create a regression test for this bug.
If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

For macOS Chrome / Desktop:

  1. Open any report
  2. Click the FAB button, then right-click report action, then Open the search page with cmd + k
  3. Notice no popover/context menu is being stuck, and the search page is opened
  4. Click emoji picker -> right-click report action -> cmd + k
  5. Notice no popover/context menu is being stuck, and search page is opened
  6. Right-click context menu -> choose emoji picker inside context menu -> cmd + k
  7. Notice no popover/context menu is being stuck, and search page is opened
  8. Click the Fab button -> right-click on LHN -> cmd + k
  9. Notice no popover/context menu is being stuck, and search page is opened
  10. Click any button that triggers popover / context menu with other different combinations -> cmd + k
  11. Notice there is no popover/context menu being stuck, and search page is opened

For mobile:

  1. Click the emoji picker, fab button, long press report action, and other actions to trigger popover or context menu
  2. Verify the components function properly when opening and closing the context menu.

@melvin-bot melvin-bot bot added the Overdue label Nov 3, 2023
Copy link

melvin-bot bot commented Nov 6, 2023

@cead22, @kevinksullivan, @mollfpr, @tsa321 Eep! 4 days overdue now. Issues have feelings too...

@melvin-bot melvin-bot bot removed the Overdue label Nov 6, 2023
@cead22
Copy link
Contributor

cead22 commented Nov 6, 2023

@mollfpr thanks for identifying the offending PR and commenting on it

The regression step should be enough.

Agreed, crossing off this item from the checklist as well, thanks!

@kevinksullivan
Copy link
Contributor

Payment summary:

@JmillsExpensify
Copy link

$500 payment approved for @mollfpr based on comment above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Daily KSv2 Engineering External Added to denote the issue can be worked on by a contributor
Projects
None yet
Development

No branches or pull requests