[HOLD for payment 2023-09-06] [$1000] Emoji picker closes automatically on archived task message in main thread

[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 the app in android chrome
2. Open any report, click plus, click assign task and assign task to any user
3. Mark task as complete, reopen the task and delete the task
4. Click on 'From' link in header and react with any default emoji
5. Click emoji picker button besides react and focus on search, observe that app closes the picker as soon as we focus on search

Expected Result:

App should not close the emoji picker when we focus on search while reacting on archived task message in main thread

Actual Result:

App closes the emoji picker when we focus on search while reacting on archived task message in main thread

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.46-2
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

closes.emoji.picker.on.search.click.on.archived.task.msg.mp4

az_recorder_20230727_153640.1.mp4

Expensify/Expensify Issue URL:
Issue reported by: @dhanashree-sawant
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1690440331949509

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011c98ab568501035b
• Upwork Job ID: 1684968031861731328
• Last Price Increase: 2023-08-11
• Automatic offers:
• aimane-chnaif | Reviewer | 26077419
• bernhardoj | Contributor | 26077422
• dhanashree-sawant | Reporter | 26077423

[melvin-bot]

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

[ginsuma]

Proposal

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

Emoji picker closes automatically on archived task message in main thread.

What is the root cause of that problem?

In this case, emoji picker close by LOC below:

App/src/pages/home/ReportScreen.js

Lines 162 to 166 in f8bc305

	componentDidUpdate(prevProps) {
	// If composer should be hidden, hide emoji picker as well
	if (ReportUtils.shouldHideComposer(this.props.report, this.props.errors)) {
	EmojiPickerAction.hideEmojiPicker(true);
	}

When we click "From ..." in header, we Navigation.goBack and we have two reports in stack. One of them is archived task report, when we click to search emoji field, componentDidUpdate trigger (I think because the layout change when soft keyboard open, on desktop, we can resize browser to trigger), ReportUtils.shouldHideComposer return true with archived report => hide emoji picker.

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

We can use props.isFocused from withNavigationFocus to avoid calling hide emoji picker from blurred screen.

if (this.props.isFocused && ReportUtils.shouldHideComposer(this.props.report, this.props.errors)) { 
   EmojiPickerAction.hideEmojiPicker(true); 
} 

[bernhardoj]

Proposal

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

The Emoji picker automatically closes if there is an archived report screen below the current report screen.

What is the root cause of that problem?

In the report screen, there is a code to automatically hide the emoji picker if the room composer becomes hidden.

App/src/pages/home/ReportScreen.js

Lines 163 to 166 in 975146f

	// If composer should be hidden, hide emoji picker as well
	if (ReportUtils.shouldHideComposer(this.props.report, this.props.errors)) {
	EmojiPickerAction.hideEmojiPicker(true);
	}

This is to fix this issue #20765 where we want to hide the emoji picker when the main composer hides either because the room becomes archived or read-only. The fix totally makes sense. However, the emoji picker is a global component and they seem to not be aware of the case that the emoji picker can be opened from report action, and in our case, the previous report screen component update is still triggered.

When we focus on the emoji picker search field, componentDidUpdate will be triggered. Using wdyr, I found that the rerender is triggered by withWindowDimensions. Even though the value of the dimension does not change, the props object is different.

App/src/components/withWindowDimensions.js

Lines 72 to 81 in 975146f

	<WindowDimensionsContext.Provider
	value={{
	windowHeight: windowDimension.windowHeight + getWindowHeightAdjustment(insets),
	windowWidth: windowDimension.windowWidth,
	isExtraSmallScreenWidth,
	isSmallScreenWidth,
	isMediumScreenWidth,
	isLargeScreenWidth,
	}}
	>

But this is not the issue we want to care. So, when the rerender is triggered, both the current report screen and the previous archived report screen will run the componentDidUpdate and check if ReportUtils.shouldHideComposer is true or not. The current report screen will skip it because ReportUtils.shouldHideComposer returns false, but the previous archived report will hide the emoji picker because ReportUtils.shouldHideComposer is true for it.

Btw, this emoji picker close issue also happens when you open an emoji picker of a message reaction in an archived room. Below solution will handle it too.

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

I'm thinking of the same idea we use here:

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

Lines 137 to 141 in 975146f

	if (EmojiPickerAction.isActiveReportAction(props.action.reportActionID)) {
	EmojiPickerAction.hideEmojiPicker(true);
	}
	},
	[props.action.reportActionID],

Every time we open an emoji picker (showEmojiPicker), we will attach a report action id to it. isActiveReportAction will tell us whether the emoji picker is belong to the given report action id. And if it's, we hide the emoji picker. The problem is emoji picker currently only accepts report action as the id. So, what we need to do is to refactor it a bit to accept an ID instead of a report action. The ID will be passed from the component that shows the emoji picker. It will be either a report action ID or a report ID.

Report ID will be used when we show the emoji picker from the main composer. Then, in the report screen, if the emoji picker from the main composer is active, we hide it.

if (ReportUtils.shouldHideComposer(this.props.report, this.props.errors) && EmojiPickerAction.isActive(this.props.report.reportID)) {
    EmojiPickerAction.hideEmojiPicker(true);
}

[melvin-bot]

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

[melvin-bot]

Current assignee @flaviadefaria is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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