[HOLD on #25892][$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 [email protected] 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
• [x] MacOS / Chrome / Safari
• [x] 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

https://github.com/Expensify/App/assets/78819774/488001a6-9f6b-4dca-9fea-af34e924bc14

https://github.com/Expensify/App/assets/78819774/592b30c0-8304-4af8-9846-efbf7ea68a69

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: 2023-09-23

[melvin-bot[bot]]

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

[melvin-bot[bot]]

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

[melvin-bot[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[bot]]

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

[melvin-bot[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.

https://github.com/Expensify/App/blob/76c1559fb3fbee1d07c8f210b522b63edd03920e/src/pages/home/report/ReportActionItemMessageEdit.js#L411-L414

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

https://github.com/Expensify/App/assets/85894871/8ba2aa3f-f8a5-4684-80d9-99eb4b26b254

[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[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: [email protected] Upwork Profile Link: LINK

[melvin-bot[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. https://github.com/Expensify/App/blob/c77814fd5e643cba78e8c8294370d78f633a59c5/src/pages/home/report/ReportActionItemMessageEdit.js#L411-L414

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

https://github.com/Expensify/App/assets/93402058/8112d40f-6754-4385-bfed-f4bb0519599f

Result

https://github.com/Expensify/App/assets/93402058/28ecafc6-a029-4c64-99d3-654da1cca983

[melvin-bot[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: [email protected] Upwork Profile Link: https://www.upwork.com/freelancers/~01c158240bd3a5fc99

[melvin-bot[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 https://github.com/Expensify/App/issues/25892#issuecomment-1694065191 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.

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[johncschuster]

Still holding on https://github.com/Expensify/App/issues/25892

[johncschuster]

Still holding

[johncschuster]

Still holding

[johncschuster]

Still holding

[johncschuster]

Still holding

[johncschuster]

Still holding

[johncschuster]

Still holding

[johncschuster]

Still holding

[melvin-bot[bot]]

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

[johncschuster]

I will be OOO starting Monday, December 18, and will return Tuesday, January 2.

Current status: This issue is on hold for #25892

If this issue is open when I'm back from OOO, I'll take it back over. Thank you!

[abekkala]

this is still on hold for 25892 - changing this to weekly as daily is not needed while on hold