[HOLD for payment 2024-07-25] [$250] mWeb - Chat - The emoji picker is closed and user unable to select emoji

[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: 9.0.5-3
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4701464
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Tap on a report
3. Send a message
4. Long press the message sent and tap emoji plus icon

Expected Result:

The emoji picker must not be closed and user must be able to select emoji

Actual Result:

The emoji picker is closed and user unable to select emoji

Workaround:

Unnown

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

Bug6535856_1720444503614.Screenrecorder-2024-07-08-18-40-05-542.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~012d2a5157510d29ca
• Upwork Job ID: 1811800348003336181
• Last Price Increase: 2024-07-12
• Automatic offers:
• ikevin127 | Reviewer | 103132063

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@muttmuure FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[bernhardoj]

Proposal

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

The emoji picker is closed immediately when opening it from the context menu.

What is the root cause of that problem?

In the modal component, we set a popstate listener which will close the modal when triggered if shouldHandleNavigationBack is true (it's only true for emoji picker).

App/src/components/Modal/index.tsx

Lines 46 to 49 in dd96852

	if (shouldHandleNavigationBack) {
	window.history.pushState({shouldGoBack: true}, '', null);
	window.addEventListener('popstate', handlePopStateRef.current);
	}

It's triggered when we call back here when the modal is closed if the state contains shouldGoBack property that we push above.

App/src/components/Modal/index.tsx

Lines 23 to 29 in dd96852

	const hideModal = () => {
	setStatusBarColor(previousStatusBarColor);
	onModalHide();
	if ((window.history.state as WindowState)?.shouldGoBack) {
	window.history.back();
	}
	};

However, the back is triggered even though we don't close the emoji picker. That's because it's triggered from the context menu hide. When we show the emoji picker, the context menu is closed which triggers the back. shouldGoBack exists in the history state because the emoji picker is shown first which already pushes the new state that sets shouldGoBack to true.

Long-press comment -> context menu shown -> press add emoji reaction -> push state, shouldGoBack: true -> context menu hides -> history.back -> triggers popstate -> emoji picker closes

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

We can wait until the context menu is closed before showing the emoji picker using Modal.close. We can apply it here so it's applied to every component that shows an emoji picker, or we can just apply it in context menu case.

App/src/libs/actions/EmojiPickerAction.ts

Lines 52 to 66 in dd96852

	function showEmojiPicker(
	onModalHide: OnModalHideValue,
	onEmojiSelected: OnEmojiSelected,
	emojiPopoverAnchor: EmojiPopoverAnchor,
	anchorOrigin?: AnchorOrigin,
	onWillShow: OnWillShowPicker = () => {},
	id?: string,
	activeEmoji?: string,
	) {
	if (!emojiPickerRef.current) {
	return;
	}
	emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id, activeEmoji);
	}

Modal.close(() => emojiPickerRef.current.showEmojiPicker(onModalHide, onEmojiSelected, emojiPopoverAnchor, anchorOrigin, onWillShow, id, activeEmoji));

What alternative solutions did you explore? (Optional)

Only call back if shouldHandleNavigationBack is true, but I think it won't work if in the future multiple modal enable shouldHandleNavigationBack.

App/src/components/Modal/index.tsx

Lines 26 to 28 in dd96852

	if ((window.history.state as WindowState)?.shouldGoBack) {
	window.history.back();
	}

[melvin-bot]

@muttmuure Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~012d2a5157510d29ca

[melvin-bot]

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