[HOLD for payment 2024-08-07] [HOLD] [$1000] ReportActionContextMenu not closing properly

[kavimuru]

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

---

Action Performed:

1. Open ND
2. Hover on any chat for report action context menu
3. Press Add reaction
4. Now press CTRL+K
5. Press the back arrow to close the search (RHP)
6. Now check the report action context menu after closing modal

Expected Result:

Report action context menu should be hidden, and be shown only on hovering

Actual Result:

Report action context menu gets stuck

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.48-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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-07-30.at.6.53.30.PM.mov

Recording.1415.mp4

Expensify/Expensify Issue URL:
Issue reported by: @shubham1206agra
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690723766793679

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013c8f7f084556466f
• Upwork Job ID: 1687252626772779008
• Last Price Increase: 2024-07-07
• Automatic offers:
• bernhardoj | Contributor | 26013711
• shubham1206agra | Reporter | 26013714

Issue Owner

Current Issue Owner: @adelekennedy / @adelekennedy

[melvin-bot]

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

[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

[vadymbokatov]

Proposal

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

ReportActionContextmenu not closing properly when mini emoji picker is opening.

What is the root cause of that problem?

When press openpicker button on mini report action context menu, it keeps context menu to open.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 66 to 77 in 3706f0b

	if (isMini) {
	return (
	<MiniQuickEmojiReactions
	key="MiniQuickEmojiReactions"
	onEmojiSelected={toggleEmojiAndCloseMenu}
	onPressOpenPicker={openContextMenu}
	onEmojiPickerClosed={closeContextMenu}
	reportActionID={reportAction.reportActionID}
	reportAction={reportAction}
	/>
	);
	}

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

I think, to close context menu when press openpicker is the best option.

if (isMini) { 
     return ( 
         <MiniQuickEmojiReactions 
             key="MiniQuickEmojiReactions" 
             onEmojiSelected={toggleEmojiAndCloseMenu} 
             onEmojiPickerClosed={closeContextMenu} 
             reportActionID={reportAction.reportActionID} 
             reportAction={reportAction} 
         /> 
     ); 
 }

What alternative solutions did you explore? (Optional)

Result

Screen.Recording.2023-08-01.at.06.47.25.mov

[jfquevedol2198]

Proposal

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

ReportActionContextMenu not closing properly

What is the root cause of that problem?

App/src/components/EmojiPicker/EmojiPicker.js

Lines 71 to 77 in 024d210

	const hideEmojiPicker = (isNavigating) => {
	if (isNavigating) {
	onModalHide.current = () => {};
	}
	emojiPopoverAnchor.current = null;
	setIsEmojiPickerVisible(false);
	};

In EmojiPicker, hideEmojiPicker action which is fired by onClose of Modal is not calling onModalHide.current if its being closed by navigating. Modal component's onModalHide performs parent element's close action, but when onClose is fired, it doesn't call onModalHide props of Modal component. so parent element (ReportActionContextMenu) is not closed and keeps showing although ReportAction is not hovered because shouldKeepOpen was not reseted by false.

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

If EmojiPicker is being closed by navigating, need to call onModalHide.current before initializing it.

    const hideEmojiPicker = (isNavigating) => {
        if (isNavigating) {
            if (onModalHide.current) onModalHide.current();
            onModalHide.current = () => {};
        }
        emojiPopoverAnchor.current = null;
        setIsEmojiPickerVisible(false);
    };

Result

Screen.Recording.2023-08-01.at.6.49.50.AM.mov

What alternative solutions did you explore? (Optional)

N/A

[bernhardoj]

Proposal

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

The mini context menu does not hide if an emoji picker is open while navigating to another page with a shortcut.

What is the root cause of that problem?

The mini context menu will show when the report action is hovered or shouldKeepOpen state is true.

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

Lines 87 to 88 in 52b8ddc

	return (
	(this.props.isVisible || this.state.shouldKeepOpen) && (

As soon as we open the emoji picker, the report action will lose its hovered state, and instead, the shouldKeepOpen state becomes true.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Line 71 in 52b8ddc

onPressOpenPicker={openContextMenu}

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

Line 101 in 52b8ddc

openContextMenu: () => this.setState({shouldKeepOpen: true}),

shouldKeepOpen will become false when we close the emoji picker.

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Line 72 in 52b8ddc

onEmojiPickerClosed={closeContextMenu}

App/src/pages/home/report/ContextMenu/ContextMenuActions.js

Lines 47 to 52 in 52b8ddc

	renderContent: (closePopover, {reportID, reportAction, close: closeManually, openContextMenu}) => {
	const isMini = !closePopover;
	const closeContextMenu = (onHideCallback) => {
	if (isMini) {
	closeManually();

App/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

Line 100 in 52b8ddc

close: () => this.setState({shouldKeepOpen: false}),

The emoji picker relies on the modal onModalHide callback to notify that the emoji picker is closed.

App/src/components/EmojiPicker/EmojiPicker.js

Line 149 in 52b8ddc

onModalHide={onModalHide.current}

App/src/components/EmojiPicker/EmojiPicker.js

Lines 47 to 48 in 52b8ddc

	const showEmojiPicker = (onModalHideValue, onEmojiSelectedValue, emojiPopoverAnchorValue, anchorOrigin, onWillShow = () => {}, reportActionValue) => {
	onModalHide.current = onModalHideValue;

However, when we use a shortcut to go to other pages, we will close any modal that is visible, wait for it to close, and do the navigation. On closing the picker, we check if isNavigating is true, and if true, we clear the onModalHide callback.

App/src/components/EmojiPicker/EmojiPicker.js

Lines 71 to 74 in 52b8ddc

	const hideEmojiPicker = (isNavigating) => {
	if (isNavigating) {
	onModalHide.current = () => {};
	}

isNavigating is true when we are navigating to other pages. This is useful to prevent the composer picker modal hide callback that will refocus the composer.

App/src/pages/home/report/ReportActionCompose.js

Lines 1199 to 1203 in 52b8ddc

	<EmojiPickerButton
	isDisabled={isBlockedFromConcierge || this.props.disabled}
	onModalHide={() => {
	this.focus(true);
	}}

Because the hide callback is cleared, we have no way to notify the mini context menu to set the shouldKeepOpen back to false.

Even though we fixed the above issue, we have another recent issue introduced by shouldFreezeCapture. If a modal/popover is visible, the Hoverable won't respond to any hover event, so the hover state is stuck.

App/src/pages/home/report/ReportActionItem.tsx

Lines 900 to 901 in 491d8dd

	<Hoverable
	shouldFreezeCapture={modal?.willAlertModalBecomeVisible}

It's added so the action is highlighted while a report preview payment method popover is shown (confirmed here).

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

We shouldn't clear the modal hide callback because there are cases where we need to have the hide callback. Instead, we can pass the isNavigating value to the onModalHide callback and let each component that uses it decide what to do based on isNavigating value.

For example, on ReportActionCompose (and ReportActionItemMessageEdit), we will only focus back on the composer if isNavigating is false.

App/src/pages/home/report/ReportActionCompose.js

Lines 1201 to 1203 in 52b8ddc

	onModalHide={() => {
	this.focus(true);
	}}

onModalHide={(isNavigating) => {
    if (!isNavigating) this.focus(true);
}}

To fix the 2nd issue, we need to remove shouldFreezeCapture from the action Hoverable.

App/src/pages/home/report/ReportActionItem.tsx

Lines 900 to 901 in 491d8dd

	<Hoverable
	shouldFreezeCapture={modal?.willAlertModalBecomeVisible}

Now, to highlight the action while report preview payment method popover is visible, we need to create a new state (called isPaymentMethodPopoverActive) and pass it here.

App/src/pages/home/report/ReportActionItem.tsx

Lines 924 to 926 in 491d8dd

	<View
	style={StyleUtils.getReportActionItemStyle(
	hovered || isWhisper || isContextMenuActive || !!isEmojiPickerActive || draftMessage !== undefined,

We set the state to true when the popover is shown and set to false when the popover is closed.

What alternative solutions did you explore? (Optional)

Alternative 1:
Pass a new parameter to showEmojiPicker called forceHideCallback. If forceHideCallback is true, we won't clear the hide callback.

Alternative 2:
This alternative requires the most changes, but I think the best. As explained in my root cause, isNavigating is useful to prevent the composer picker modal hide callback that will refocus the composer after navigating. The real reason isNavigating is added is that we put a delay before focusing the composer after the emoji picker is closed.

App/src/pages/home/report/ReportActionCompose.js

Lines 750 to 764 in c3bafa6

	InteractionManager.runAfterInteractions(() => {
	if (!this.textInput) {
	return;
	}
	if (!shouldelay) {
	this.textInput.focus();
	} else {
	// Keyboard is not opened after Emoji Picker is closed
	// SetTimeout is used as a workaround
	// https://github.com/react-native-modal/react-native-modal/issues/114
	// We carefully choose a delay. 100ms is found enough for keyboard to open.
	setTimeout(() => this.textInput.focus(), 100);
	}
	});

This means, without isNavigating, we will navigate to the search page and after some delay, we will focus the main composer.

The focus delay is added as a workaround for the modal issue where onModalHide is called too early (this is a well-known issue). If we remove this workaround, we don't need to have the isNavigating logic anymore. So, here is the plan:

1. Fix the onModalHide callback is called too early. This fix requires an upstream (react-native-modal) fix.
   a. We should call onModalHide in Modal onDismiss callback. Will open PR after both below are fixed.
   b. onDismiss callback is not available in Android, but I have an open PR for it.
   c. onDismiss is called too early on rn-web, but I have an open PR for it.
2. Remove the focus delay (InteractionManager + setTimeout) workaround from composer
3. Remove all usage of isNavigating workaround.

[adelekennedy]

Trying to reproduce on chrome staging (v1.3.49-1) or prod (v1.3.48-5) and I'm not getting the same result - the ra context menu doesn't reappear. I think this may have been fixed. checking in Slack

[jfquevedol2198]

@adelekennedy I can see this on New Dot and Staging.

[adelekennedy]

moving this forward!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013c8f7f084556466f