[$1000] The emoji recommendation list closes on switching to next tab

[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. Go to staging dot on chrome
2. Go to a chat > Type in any emoji within colon. Example :dis and the recommendation list appears.
3. Switch to the next tab and come back to the application.
4. Result : See that the emoji recommendation list closes
5. Follow the above steps in slack and see that the emoji recommendation doesn’t close even when we switch to the next tab

Expected Result:

The emoji recommendation list shouldn’t close on switching to the next tab

Actual Result:

The emoji recommendation list closes on switching to the next tab

Workaround:

unknown

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.2.90-4
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

Recording.69.mp4

open-2023-03-27_14.44.41.mp4

Expensify/Expensify Issue URL:
Issue reported by: @avi-shek-jha
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1679907956819009

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010419d96d34cc6f01
• Upwork Job ID: 1646895022138916864
• Last Price Increase: 2023-05-15

[MelvinBot]

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

[MelvinBot]

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

[Pujan92]

Maybe dupe of #16364

[MelvinBot]

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

[MelvinBot]

@michaelhaxhiu 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[michaelhaxhiu]

Thanks @Pujan92.

I'd like to cc @0xmiroslav - curious what you think about this bug? If we agree with your latest comment on #16364 (comment) then I think we would proceed with calling this a bug?

So can we confirm that consistent behavior should be to show recommendation on both focus and selection change always on all platforms?

[michaelhaxhiu]

I can't decide if this is a feature or bug, basically?

[0xmiros]

I can't decide if this is a feature or bug, basically?

It may depend on team's confirmation of #16364 (comment).
If we should always show recommendations while focusing on input, then this should be a bug because you can still type after switching back from another tab.

[chiragsalian]

Discussed on slack and it's decided as not a priority for the moment. Closing it out.

[michaelhaxhiu]

We had a change of heart after discussing further, let's re-open and prioritize because this is a valid inconsistency in the product (and thus - we should fix it).

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[akinwale]

Proposal

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

The emoji recommendation list automatically closes if a user switches to a different browser tab and returns back to the Expensify Chat tab.

What is the root cause of that problem?

The emoji recommendation list is set to hide with a call to this.resetSuggestedEmojis in the onBlur event handler for the composer in ReportActionCompose.

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

Line 881 in c0af288

this.resetSuggestedEmojis();

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

The reset call can be changed to hide the emoji suggestions instead using this.setShouldShowSuggestionMenuToFalse(); and then when the user returns to the window, since the composer will be autofocused, we update the onFocus handler with an additional conditional call:

if (this.state.suggestedEmojis.length > 0) { this.setState({shouldShowSuggestionMenu: true}); }

The onFocus and onBlur handlers for the composer would end up looking like this:

onFocus={() => {
      this.setIsFocused(true)
      if (this.state.suggestedEmojis.length > 0) {
          this.setState({shouldShowSuggestionMenu: true});
      }
}}
onBlur={() => {
      this.setIsFocused(false);
      this.setShouldShowSuggestionMenuToFalse();
}}

What alternative solutions did you explore? (Optional)

Using the Page Visibility API to check when a user switches to a different tab. However, the onBlur handler for the composer always gets called before the visibilitychange event fires.

[dukenv0307]

Proposal

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

The emoji recommendation list closes on switching to the next tab

What is the root cause of that problem?

In

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

Line 859 in a5d171b

this.resetSuggestedEmojis();

we're resetting the suggested emojis when the Composer is blurred, thus close the emoji recommendation list.

If we mirror the correct behavior of Slack, in the following 2 cases we should not close the emoji recommendation list when the composer is blurred:

1. When we switch to another browser tab
2. When we open another native app (aside from the browser)

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

In here

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

Line 859 in a5d171b

this.resetSuggestedEmojis();

, we need to check that the window is currently visible and focused, if yes then we'll reset the emoji list since that means the user proactively blurs the input. If no, we should not reset the emoji list since the user only switches to another tab/app and will come back and focus on the input again.

We can just update

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

Line 859 in a5d171b

this.resetSuggestedEmojis();

to

if (Visibility.isVisible() && Visibility.hasFocus()) {
    this.resetSuggestedEmojis();
}

What alternative solutions did you explore? (Optional)

NA

[sonialiap]

Still on hold for #16078

[marcochavezf]

Still on hold for #16078

[marcochavezf]

Still on hold for #16078

[sonialiap]

Still on hold for #16078

[DylanDylann]

Still on hold. @sonialiap Should we update label to Monthly

[marcochavezf]

Still on hold. I think weekly is fine, the other issue was moved to weekly too

[marcochavezf]

Still on hold

[marcochavezf]

The PR for the issue that we're holding for was recently merged, but let's wait a bit more in case of regressions

[sonialiap]

#16078 has merged and the reported issue is reproducible

[sonialiap]

Asking team input on value of issue - slack

[sonialiap]

After discussing we've decided to close this issue as low priority