[HOLD for payment 2024-10-17] [$500] Chat - Edit composer is focused even if emoji picker is open

[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!

---

Action Performed:

1. Open any report
2. Open edit composer for 2 messages
3. Open emoji picker for first one
4. Open emoji picker of second one without closing previous message emoji picker

Expected Result:

Edit Composer should not be focused if emoji picker is displayed

Actual Result:

Edit Composer is focused if emoji picker is displayed

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
• Windows / Chrome

Version Number: 1.3.70-5

Reproducible in staging?: Yes

Reproducible in production?: Yes

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

Monosnap.screencast.2023-09-16.12-41-08.mp4

Recording.35.2.mp4

Expensify/Expensify Issue URL:

Issue reported by: @Krishna2323)

Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1694848738372809

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~016c6dc7febe9f77e8
• Upwork Job ID: 1703183624812048384
• Last Price Increase: 2024-09-25

Issue Owner

Current Issue Owner: @johncschuster

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Chat - Edit composer is focused even if emoji picker is open

What is the root cause of that problem?

In the code, when the emoji picker hides, it directly sets the composer to be focused without checking if the emoji picker is currently visible.

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

Lines 411 to 414 in 76c1559

	onModalHide={() => {
	setIsFocused(true);
	focus(true);
	}}

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

We need to add a check for isEmojiPickerVisible before focusing on the composer.

Updated code:

onModalHide={() => {
    InteractionManager.runAfterInteractions(() => {
        if (EmojiPickerAction.isEmojiPickerVisible() || ['TEXTAREA', 'INPUT'].includes(DomUtils.getActiveElement().nodeName)) {
            return;
        }
        setIsFocused(true);
        focus(true);
    });
}}

Result

fixed.mp4

[tanerochris]

Proposal

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

Report Edit Message composer remains focused when emoji picker remains open.

What is the root cause of that problem?

The issue stems from the fact that closing the emoji picker sets the isFocused state to true, this remains true when opening the emoji picker of another edit box.
https://github.com/Expensify/App/blob/c77814fd5e643cba78e8c8294370d78f633a59c5/src/pages/home/report/ReportActionItemMessageEdit.js#L411C1-L414C31

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

Set isFocusedRef.current to false if not it is not the active edit message box. Also to ensure that after selecting an emoji the current edit box becomes focused, we add focus(true) at the end of the addEmojiToTextBox handler.

onModalHide={() => {

  if (!isFocusedRef.current) {
    setIsFocused(false)
  }

  else {
    setIsFocused(true);
    focus(true);
  }

}}

const addEmojiToTextBox = (emoji) => {
        setSelection((prevSelection) => ({
            start: prevSelection.start + emoji.length + CONST.SPACE_LENGTH,
            end: prevSelection.start + emoji.length + CONST.SPACE_LENGTH,
        }));
        updateDraft(ComposerUtils.insertText(draft, selection, `${emoji} `));
        focus(true)
    };

[melvin-bot]

📣 @tanerochris! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[tanerochris]

Contributor details
Your Expensify account email: tanejuth@gmail.com
Upwork Profile Link: LINK

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[ilkeruyanik]

Proposal

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

When emoji picker is closed, text input is focused even if it should not focus.

What is the root cause of that problem?

EmojiPickerButton Component's onModalHide property sets focus without any condition in ReportActionItemMessageEdit Component, when emoji picker is closed.

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

Instead of setting focus directly, we should use ReportActionComposeFocusManager.

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

Lines 411 to 414 in c77814f

	onModalHide={() => {
	setIsFocused(true);
	focus(true);
	}}

These lines will be changed with

onModalHide={() => {
    InteractionManager.runAfterInteractions(() => {
        if (EmojiPickerAction.isEmojiPickerVisible()) {
            return;
        }
        ReportActionComposeFocusManager.focus();
    });
}}

New property 'onPress' will be added to EmojiPickerButton component. We will send a function for run on onPress.
In this case, we will use it for set ReportActionComposeFocusManager.onComposerFocus function.

onPress={() => {
    ReportActionComposeFocusManager.onComposerFocus(() => {
        if (!textInputRef.current) {
            return;
        }

        textInputRef.current.focus();
    });
}}

Screencast for showing the bug is not just about changing emoji picker

bug.mp4

Result

result.mp4

[melvin-bot]

📣 @ilkeruyanik! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[ilkeruyanik]

Contributor details
Your Expensify account email: ilker.uyanik11@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01c158240bd3a5fc99

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[Krishna2323]

I added a minor change to my proposal due to the another issue that has been highlighted by @ilkeruyanik but my solution is still different from other proposals.
Added this comment to avoid confusions.

[tienifr]

My proposal here #25892 (comment) can also solve this one. And I think it's the simplest one. There's no need to introduce new prop or use InteractionManager again, just let ReportActionComposeFocusManager and focusWithDelay handle the work.

[parasharrajat]

We might want to wait on #25892 if @tienifr's solution can solve both.

[johncschuster]

Sounds good! Let's bump this one to Weekly while we wait.

[s77rt]

I think I'm supposed to be assigned here, right? @eVoloshchak
PR: #50099

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.47-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Emoji picker onModalHide: return early if the active element is another emoji picker button #50099

If no regressions arise, payment will be issued on 2024-10-17. 🎊

For reference, here are some details about the assignees on this issue:

• @eVoloshchak requires payment through NewDot Manual Requests
• @s77rt requires payment through NewDot Manual Requests
• @Krishna2323 requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@eVoloshchak / @s77rt] The PR that introduced the bug has been identified. Link to the PR:
• [@eVoloshchak / @s77rt] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@eVoloshchak / @s77rt] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@eVoloshchak / @s77rt] Determine if we should create a regression test for this bug.
• [@eVoloshchak / @s77rt] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@johncschuster] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[s77rt]

• The PR that introduced the bug has been identified: Upgrade to react-native-web v0.19.9 #24482
• The offending PR has been commented on: Upgrade to react-native-web v0.19.9 #24482 (comment)
• A discussion in #expensify-bugs has been started: Not needed
• Determine if we should create a regression test for this bug: I don't think this requires a regression test

[melvin-bot]

Payment Summary

Upwork Job

• Reviewer: @eVoloshchak owed $500 via NewDot
• Reviewer: @s77rt owed $500 via NewDot

BugZero Checklist (@johncschuster)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1703183624812048384/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[eVoloshchak]

@johncschuster, should this be $500 or $250? The issue was originally $500 and I don't see any price changes, but that was set a long time ago

[johncschuster]

Thanks for asking, @eVoloshchak! Let me chat with the team quickly about that. I'll be back shortly!

[johncschuster]

Looking through our internal documentation, I believe we should keep this at $500 since that was the agreed-upon price, and we have not discussed altering it during the lifespan of this issue.

(I updated this comment to reflect $500)

[johncschuster]

Payment Summary

Contributor+: @eVoloshchak due $500 via NewDot
Contributor: @s77rt due $500 via NewDot

[JmillsExpensify]

$500 approved for @eVoloshchak

[JmillsExpensify]

$500 approved for @s77rt