-
Notifications
You must be signed in to change notification settings - Fork 3k
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
Comments
Triggered auto assignment to @kevinksullivan ( |
Job added to Upwork: https://www.upwork.com/jobs/~012411f85dfeed7435 |
Bug0 Triage Checklist (Main S/O)
|
Triggered auto assignment to @maddylewis ( |
Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr ( |
ProposalPlease 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 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 What alternative solutions did you explore? (Optional)we can add. |
ProposalPlease 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:
Why? App/src/components/PopoverProvider/index.js Lines 50 to 61 in 23f3b49
However, in the PressableWithSecondaryInteraction we call App/src/components/PressableWithSecondaryInteraction/index.js Lines 56 to 59 in 4f02074
What changes do you think we should make in order to solve the problem?Since right-click interaction with
+ document.dispatchEvent(new CustomEvent("secondaryinteractioncontextmenu"));
e.stopPropagation();
if (this.props.preventDefaultContextMenu) {
e.preventDefault();
}
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]);
custom-context-menu-event.mp4What alternative solutions did you explore? (Optional) |
@nahid633 I don't understand this, and why this issue is only reproduced after the second right-click? |
@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. |
@paultsimura It seems you have the correct RCA. Could you elaborate on the proposed solution and why calling the hideEmojiPicker will fix the issue? |
@mollfpr sure. This will eliminate the race condition – by calling So now the flow is correct:
1.New.Expensify.-.12.September.2023.1.mp4 |
I don't think this is correct solution. |
@Pluto0104 Why is that? |
@mollfpr I'm looking for the best solution. of course, @paultsimura's solution might handle this issue. could you please give me some time? |
ProposalPlease 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 We set a keyboard shortcut listener in this code snippet: App/src/libs/Navigation/AppNavigator/AuthScreens.js Lines 162 to 195 in 2d5bea5
We close opened modals here:
This function closes the modal using the registered Lines 22 to 33 in 2d5bea5
We set the function using the App/src/components/PopoverWithoutOverlay/index.js Lines 28 to 41 in 2d5bea5
When a race condition occurs, as shown in this video, the app triggers the old modal close finally. In this case, we would invoke 27244-root-cause.mp4What changes do you think we should make in order to solve the problem?To solve this problem, we need to close the modal here. App/src/components/PressableWithSecondaryInteraction/index.js Lines 64 to 73 in 5cf1904
We can easily obtain the close function provided by PopoverProvider from PopoverContext using the useContext hook.
What alternative solutions did you explore? (Optional)
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.
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.mp4Result27244-web-chrome.mp4P.S.
|
@mollfpr could you please review ⬆️ ? |
@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
@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? |
@mollfpr I'm just curious about that 😄, but it seems that the |
@Pluto0104, we should find the correct answer for that before moving forward. |
ProposalUpdated proposal #27244 (comment) @mollfpr I can provide more details on why the race condition happens, if needed. |
@mollfpr, I believe I have identified the correct root cause, so I have updated my proposal. 😄 Please review it again. |
PR is ready... |
Update: because there is other recent PR with a regression from other issue, my PR status is in HOLD until that PR is reverted. |
Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:
On to the next one 🚀 |
|
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.
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:
|
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:
|
Paid @dhanashree-sawant and @tsa321 . @mollfpr sent you an offer since the other job wasn't letting me pay. Lmk when you accept! |
@kevinksullivan Thank you for the payment. |
I'll complete the checklist soon. @kevinksullivan I'll do manual request in NewDot. Could you give the payment summary? Thank you! |
https://github.com/Expensify/App/pull/19011/files#r1378575720
The regression step should be enough.
For macOS Chrome / Desktop:
For mobile:
|
@cead22, @kevinksullivan, @mollfpr, @tsa321 Eep! 4 days overdue now. Issues have feelings too... |
@mollfpr thanks for identifying the offending PR and commenting on it
Agreed, crossing off this item from the checklist as well, thanks! |
Payment summary:
|
$500 payment approved for @mollfpr based on comment above. |
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:
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?
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
The text was updated successfully, but these errors were encountered: