[$250] Android - chat - After tapping header, emoji picker box is shown in details page

[lanitochka17]

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

---

Version Number: 9.0.85-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Launch app
2. Open a workspace chat
3. Tap emoji picker from compose box and quickly tap header

Expected Result:

After tapping header, emoji picker box must not be shown in details page

Actual Result:

After tapping header, emoji picker box is shown in details page

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6714185_1736880311895.Screenrecorder-2025-01-15-00-10-37-26.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021885115959959479707
• Upwork Job ID: 1885115959959479707
• Last Price Increase: 2025-01-31
• Automatic offers:
• truph01 | Contributor | 106069541

Issue Owner

Current Issue Owner: @ahmedGaber93

[melvin-bot]

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

[truph01]

Proposal

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

• Android - chat - After tapping header, emoji picker box is shown in details page

What is the root cause of that problem?

• There is no mechanism to hide the emoji picker menu when the currently focused screen is not a report. This results in the issue described in this bug, where the emoji picker box remains visible on the details page.

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

• We can add below useEffect to ReportScreen:

    useEffect(() => {
        if (prevIsFocused && !isFocused) {
            hideEmojiPicker(true);
        }
    }, [prevIsFocused, isFocused]);

It will hide the emoji context menu if the current report is not focused anymore.

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

What alternative solutions did you explore? (Optional)

[melvin-bot]

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

[johncschuster]

I will dig into this tomorrow AM

[melvin-bot]

@johncschuster Eep! 4 days overdue now. Issues have feelings too...

[johncschuster]

I didn't get to work on this today

[melvin-bot]

@johncschuster this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[melvin-bot]

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

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-02-03 11:47:54 UTC.

Proposal

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

Android - chat - After tapping header, emoji picker box is shown in details page

What is the root cause of that problem?

We don't have logic to hide the emoji picker when navigating to another page. Currently, the emoji picker is only hidden when ReportActionCompose unmounts.

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

Lines 337 to 347 in 4459f86

	// We are returning a callback here as we want to incoke the method on unmount only
	useEffect(
	() => () => {
	if (!isActiveEmojiPickerAction(report?.reportID)) {
	return;
	}
	hideEmojiPicker();
	},
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	[],
	);

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

We should update the useEffect block inside ReportActionCompose to also handle cases when navigating to another page.

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

Lines 337 to 347 in 4459f86

	// We are returning a callback here as we want to incoke the method on unmount only
	useEffect(
	() => () => {
	if (!isActiveEmojiPickerAction(report?.reportID)) {
	return;
	}
	hideEmojiPicker();
	},
	// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
	[],
	);

Updated code:

    const isCalledHideEmoji = useRef(false)
    const handleHideEmojiPicker = () => {
        // Prevent function call twice
        if (isCalledHideEmoji.current) {
            isCalledHideEmoji.current = false
            return
        }
        if (!isActiveEmojiPickerAction(report?.reportID)) {
            return;
        }
        isCalledHideEmoji.current = true
        hideEmojiPicker();
    };
    useEffect(() => {
        if (!isScreenFocused) {
            handleHideEmojiPicker()
        }
        return () => {
            handleHideEmojiPicker()
        };
    }, [isScreenFocused]);

We can consider checking the previous value of isScreenFocused is true if necessary to optimize performance during the PR phase.

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

N/A, UI bug

What alternative solutions did you explore? (Optional)

N/A
Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@johncschuster, @ahmedGaber93 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[ahmedGaber93]

Reviewing today

[linhvovan29546]

Updated proposal

Improve pseudocode to prevent the function from being called twice

[ahmedGaber93]

Thanks all for the proposals

Using hideEmojiPicker when navigation changed should work, but are we able to prevent clicking items below the picker overlay when picker is opening in the first place?

[linhvovan29546]

The click event is fired before the animation overlay of the emoji completes, which occurs on Android because it runs slower than other platforms

[ahmedGaber93]

Thanks all for the proposals

The both proposal suggest hide the picker when navigate to another screen, @truph01 suggest doing that on ReportScreen.tsx and @linhvovan29546 suggest doing that on ReportActionCompose.tsx.

While both should work, I am lean to doing that on ReportActionCompose.tsx because we already have a logic to hideEmojiPicker there.

@linhvovan29546's proposal LGTM!

@truph01's proposal looks better as It will cover all cases that show the picker like composer, edit message and message reaction.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @Julesssss, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[truph01]

@ahmedGaber93 Thanks for your feedback.

While both should work, I am lean to doing that on ReportActionCompose.tsx because we already have a logic to hideEmojiPicker there.

I don’t believe this is a fair point to favor that solution because:

1. The useEffect in my proposal can be placed anywhere within the ReportScreen component. While I suggested adding it to ReportScreen, it could also be moved to ReportActionCompose if needed.

2. The logic in the selected solution is unnecessarily complex compared to my proposal, which is simpler and more straightforward.

3. The emoji picker can be opened when reacting to any message. If ReportActionCompose is not rendered (because the report is archived, ...), the useEffect in the selected solution won’t be triggered. Can we ensure the bug won’t occur in such cases?

[ahmedGaber93]

@truph01 Thanks for your feedback

3. The emoji picker can be opened when reacting to any message. If ReportActionCompose is not rendered (because the report is archived, ...), the useEffect in the selected solution won’t be triggered. Can we ensure the bug won’t occur in such cases?

I think this is a good point, are you able to reproduce the issue with the message reaction picker?

[ahmedGaber93]

I am able to reproduce

20250206224107800.mp4

[truph01]

I think this is a good point, are you able to reproduce the issue with the message reaction picker?

Yes, I can reproduce it like you did in here.

[ahmedGaber93]

Updated my review #55233 (comment)

[Julesssss]

I'm happy with the proposal, but just wanted to check the reason behind this:

The click event is fired before the animation overlay of the emoji completes, which occurs on Android because it runs slower than other platforms

it'd be great to work with our partners to resolve this in lower-level libraries. But it doesn't need to block us here.

[truph01]

@Julesssss Libraries like react-native-modal often include animations (e.g., fade, slide) when showing or hiding the modal. These animations introduce a delay, making the modal appear smoother but not instantaneously.

[melvin-bot]

@johncschuster, @Julesssss, @ahmedGaber93 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[Julesssss]

@Julesssss Libraries like react-native-modal often include animations (e.g., fade, slide) when showing or hiding the modal. These animations introduce a delay, making the modal appear smoother but not instantaneously.

Of course, I thought this was due to a laggy app but I missread. Lets continue!

[melvin-bot]

📣 @truph01 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖