[HOLD for payment 2025-01-28] [$250] iOS Chat - Unable to open emoji picker from context menu when editing another message

[mitarachim]

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.79-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+909608@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: iPhone 15 Pro Max / iOS 18.2
App Component: Chat Report View

Action Performed:

1. Launch ND or hybrid app.
2. Go to chat.
3. Send two messages.
4. Long press on any message > Edit comment.
5. In edit mode, long press on the other message.
6. Tap Add reaction icon on the context menu to open emoji picker.

Expected Result:

Emoji picker will open.

Actual Result:

Emoji picker does not open.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6702700_1735255163104.ScreenRecording_12-27-2024_07-15-09_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021874054906261736852
• Upwork Job ID: 1874054906261736852
• Last Price Increase: 2024-12-31
• Automatic offers:
• DylanDylann | Reviewer | 105576179

Issue Owner

Current Issue Owner: @laurenreidexpensify

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (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.

[bernhardoj]

Proposal

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

Can't open emoji picker when an edit composer is focused.

What is the root cause of that problem?

When an edit composer is focused, the main composer will be hidden. When we press the emoji picker button, it will first close the context menu, then open the picker and pass the main composer ref as the anchor.

App/src/components/Reactions/QuickEmojiReactions/index.native.tsx

Lines 8 to 16 in e94df0f

	// We first need to close the menu as it's a popover.
	// The picker is a popover as well and on mobile there can only
	// be one active popover at a time.
	closeContextMenu(() => {
	// As the menu which includes the button to open the emoji picker
	// gets closed, before the picker actually opens, we pass the composer
	// ref as anchor for the emoji picker popover.
	openPicker?.(ReportActionComposeFocusManager.composerRef);
	});

The main composer will be measured, but since the main composer is "hidden", the measurement is never complete so the emoji picker is never shown.

App/src/libs/calculateAnchorPosition.ts

Lines 15 to 21 in e94df0f

	anchorComponent.measureInWindow((x, y, width, height) => {
	if (anchorOrigin?.vertical === CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP && anchorOrigin?.horizontal === CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT) {
	resolve({horizontal: x, vertical: y + height + (anchorOrigin?.shiftVertical ?? 0), width, height});
	return;
	}
	resolve({horizontal: x + width, vertical: y + (anchorOrigin?.shiftVertical ?? 0), width, height});
	});

App/src/components/EmojiPicker/EmojiPicker.tsx

Lines 94 to 97 in e94df0f

	calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
	Modal.close(() => {
	onWillShow?.();
	setIsEmojiPickerVisible(true);

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

The reason we use main composer as the anchor is because when we close the context menu, the emoji picker button isn't exist anymore.

App/src/components/Reactions/QuickEmojiReactions/index.native.tsx

Lines 11 to 16 in e94df0f

	closeContextMenu(() => {
	// As the menu which includes the button to open the emoji picker
	// gets closed, before the picker actually opens, we pass the composer
	// ref as anchor for the emoji picker popover.
	openPicker?.(ReportActionComposeFocusManager.composerRef);
	});

But we already close any active modal when opening the picker after completing the measurement, so we don't need to close the context menu before doing the measurement and don't need to use the main composer as the ref. It will use the emoji button by default.

App/src/components/EmojiPicker/EmojiPicker.tsx

Lines 94 to 97 in e94df0f

	calculateAnchorPosition(emojiPopoverAnchor?.current, anchorOriginValue).then((value) => {
	Modal.close(() => {
	onWillShow?.();
	setIsEmojiPickerVisible(true);

const onPressOpenPicker = (openPicker?: OpenPickerCallback) => {
    openPicker?.();
};

(another issue) But when we close the emoji picker menu, we can see that the main composer is still hidden even though the edit composer isn't focused anymore. We show the main composer when the edit composer is blurred, but if it's caused by the emoji picker modal, then we ignore it.

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

Lines 545 to 552 in e94df0f

	onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
	setIsFocused(false);
	const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
	if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isEmojiPickerVisible()) {
	return;
	}
	setShouldShowComposeInputKeyboardAware(true);
	}}

It was added so that the main composer won't show when an emoji picker will show even when the edit composer is blurred. It works fine if we open the emoji picker from the edit composer because after closing the picker, we will refocus on the edit composer.

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

Lines 576 to 584 in e94df0f

	<EmojiPickerButton
	isDisabled={shouldDisableEmojiPicker}
	onModalHide={() => {
	const activeElementId = DomUtils.getActiveElement()?.id;
	if (activeElementId === CONST.COMPOSER.NATIVE_ID || activeElementId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID) {
	return;
	}
	ReportActionComposeFocusManager.focus();
	}}

But since we open the picker from the context menu, there is no refocus. We have 2 options to fix this. First, we can let the main composer to show when the edit composer is blurred when the emoji picker modal is shown by removing EmojiPickerAction.isEmojiPickerVisible condition, but this will make the behavior differents between mWeb and native.

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

Lines 545 to 552 in e94df0f

	onBlur={(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
	setIsFocused(false);
	const relatedTargetId = event.nativeEvent?.relatedTarget?.id;
	if (relatedTargetId === CONST.COMPOSER.NATIVE_ID || relatedTargetId === CONST.EMOJI_PICKER_BUTTON_NATIVE_ID || EmojiPickerAction.isEmojiPickerVisible()) {
	return;
	}
	setShouldShowComposeInputKeyboardAware(true);
	}}

Second, we can refocus to the edit composer when the emoji picker from context menu hides, only if it's a small screen.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

N/A

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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