Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[HOLD for payment 2025-01-07] [HOLD for payment 2024-10-22] [$2000] Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button #10731

Open
kbecciv opened this issue Aug 31, 2022 · 292 comments
Assignees
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Engineering External Added to denote the issue can be worked on by a contributor Weekly KSv2

Comments

@kbecciv
Copy link

kbecciv commented Aug 31, 2022

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 App and login with any account
  2. Click the green plus button and click Request money
    Enter an amount and select the Next confirmation button
    Complete the request money flow

Expected Result:

Always focus the input, but prevent keyboard from opening on mobile & mWeb

Actual Result:

The composer is focused.

Workaround:

Swipe the keyboard down to un-focus the composer

Platform:

Where is this issue occurring?

  • iOS
  • Android

Version Number: 1.1.95.4

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): any

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5712230_Record_2022-08-31-20-06-38_4f9154176b47c00da84e32064abf1c48.mp4
Bug5712230_Record_2022-08-31-20-24-05_4f9154176b47c00da84e32064abf1c48.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Issue OwnerCurrent Issue Owner: @Christinadobrzyn
@melvin-bot
Copy link

melvin-bot bot commented Aug 31, 2022

Triggered auto assignment to @neil-marcellini (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

@neil-marcellini
Copy link
Contributor

Hmm, so if you navigate to any normal chat on mobile, the composer is not focused until you tap into it. That is the desired behavior. I think this is a valid issue if we change it from:
"Chat composer is not focused after IOU request" to "Chat composer is focused after IOU request from green plus button"

Also it looks like this only happens when the request is with a brand new chat. I was not able to see the issue when sending a request via the green plus to a chat where there was a good amount of history and zero IOU requests. This is a good external issue with lower priority (weekly).

@neil-marcellini neil-marcellini changed the title Android/IOS - Split/request money - Cursor is not appear in compose box after split/request money Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button Sep 1, 2022
@neil-marcellini
Copy link
Contributor

I updated the issue title and description to reflect the actual problem.

@neil-marcellini neil-marcellini added the External Added to denote the issue can be worked on by a contributor label Sep 1, 2022
@neil-marcellini neil-marcellini removed their assignment Sep 1, 2022
@melvin-bot
Copy link

melvin-bot bot commented Sep 1, 2022

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

@bfitzexpensify
Copy link
Contributor

Upwork job here

@melvin-bot melvin-bot bot added Weekly KSv2 and removed Daily KSv2 labels Sep 1, 2022
@melvin-bot
Copy link

melvin-bot bot commented Sep 1, 2022

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (Exported)

@melvin-bot melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Sep 1, 2022
@melvin-bot
Copy link

melvin-bot bot commented Sep 1, 2022

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

@melvin-bot melvin-bot bot changed the title Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button [$250] Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button Sep 1, 2022
@syedsaroshfarrukhdot
Copy link
Contributor

Proposal

autoFocus={this.shouldFocusInputOnScreenFocus || _.size(this.props.reportActions) === 1}

This issue is caused by _.size(this.props.reportActions) === 1 in autofocus props of Composer when this.props.reportActions === 1 is true it focuses in the input field to fix the issue we need to remove it.

Solution :-
To fix the issue we need to set autofocus props like this autoFocus={this.shouldFocusInputOnScreenFocus}

After Fixing :-

Untitled.mov

@melvin-bot melvin-bot bot added Daily KSv2 and removed Weekly KSv2 labels Sep 1, 2022
@christianwen
Copy link
Contributor

Proposal

Problem

The issue is in src/pages/home/report/ReportActionCompose.js.

This is due to when we split/request money for the first time for a new group/person, the this.props.reportActions is loaded with only 1 IOU message initially and then it will be populated with other messages like the CREATED message for the group. Thus, initially the _.size(this.props.reportActions) === 1 will be true (before it loads everything) and the composer will be focused incorrectly.

The previous proposal to remove the _.size(this.props.reportActions) === 1 will cause a regression because that code is there so that when user enters a new chat, the keyboard will be focused automatically. We can refer to the requirement for that here #4921 (comment).

Solution

We'll implement a new isNewChat method that checks both _.size(this.props.reportActions) === 1 and the only message in the chat is the CREATED message, this will help us avoid the lazy loading problem mentioned.

+isNewChat() {
+        if (_.size(this.props.reportActions) === 1) {
+            const firstReportAction = _.head(_.values(this.props.reportActions));
+            return firstReportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED;
+        }

+        return false;
+    }
....
<Composer
-      autoFocus={this.shouldFocusInputOnScreenFocus || _.size(this.props.reportActions) === 1}
+      autoFocus={this.shouldFocusInputOnScreenFocus || this.isNewChat()}

After the fix, the chat composer is no longer focused incorrectly

Simulator.Screen.Recording.-.iPhone.13.-.2022-09-02.at.17.15.09.mp4

I also discover another bug where the Chat composer will initially have the Say hello! placeholder (which should only appear if the chat is completely new and there's no message in the chat), only a few moments later it will change to Write something... placeholder. You can see the issue in the video capture attached in the issue description:

Screen Shot 2022-09-02 at 17 17 51

The fix for that will use the same isNewChat method I mentioned above, please confirm if I should fix it in the scope of this issue as well.

Please let me know if you have any concerns regarding the above proposal.
Thanks!

@melvin-bot
Copy link

melvin-bot bot commented Sep 5, 2022

@iwiznia, @bfitzexpensify, @Santhosh-Sellavel Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

@melvin-bot melvin-bot bot added the Overdue label Sep 5, 2022
@syedsaroshfarrukhdot
Copy link
Contributor

syedsaroshfarrukhdot commented Sep 5, 2022

As mentioned by @christianwen _.size(this.props.reportActions) === 1 will cause a regression because that code is there so that when a user enters a new chat, the keyboard will be focused automatically.

But I tested it thoroughly when was proposing a solution the composer was not focused when a user enters a new chat

Simulator.Screen.Recording.-.iPhone.13.Pro.-.2022-09-05.at.13.10.13.mp4

So I thought there is no need of _.size(this.props.reportActions) === 1 so we will be able to resolve the issue by removing this condition. If we need to focus when a user enters a new chat then we could change condition to _.size(this.props.reportActions) === 0 or we need to find a solution to check why _.size(this.props.reportActions) === 1 is not getting correct size of messages on intial render.

Solution after _.size(this.props.reportActions) === 0 :-

Simulator.Screen.Recording.-.iPhone.13.Pro.-.2022-09-05.at.13.21.58.mp4

We need to identify first what we want to achieve does the composer needs to be focused on a new chat or not ? After identifying what needs to be done then we can work on a solution. @neil-marcellini

@neil-marcellini
Copy link
Contributor

@syedsaroshfarrukhdot thanks for investigating. I think we want to have the composer focused when creating a new chat but not after creating an IOU request. I'll let @iwiznia handle this going forward since he's the CME on this issue.

@Christinadobrzyn Christinadobrzyn added Weekly KSv2 and removed Daily KSv2 labels Oct 23, 2024
@christianwen
Copy link
Contributor

I faced with some issues when addressing the regressions. I'll open it in 1-2 days

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Weekly KSv2 labels Oct 31, 2024
@christianwen
Copy link
Contributor

The PR is ready for review @DylanDylann

@Christinadobrzyn
Copy link
Contributor

Note for Melvin - PR under review cc @DylanDylann

@Christinadobrzyn
Copy link
Contributor

Just checking on this @DylanDylann can you provide an update on the PR review? Thanks!

@DylanDylann
Copy link
Contributor

I am reviewing the PR

@Christinadobrzyn
Copy link
Contributor

monitoring PR - #51172

@Christinadobrzyn
Copy link
Contributor

monitoring PR - #51172

3 similar comments
@Christinadobrzyn
Copy link
Contributor

monitoring PR - #51172

@Christinadobrzyn
Copy link
Contributor

monitoring PR - #51172

@Christinadobrzyn
Copy link
Contributor

monitoring PR - #51172

Copy link

melvin-bot bot commented Dec 27, 2024

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

@melvin-bot melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Dec 27, 2024
@melvin-bot melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Dec 30, 2024
@melvin-bot melvin-bot bot changed the title [HOLD for payment 2024-10-22] [$2000] Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button [HOLD for payment 2025-01-07] [HOLD for payment 2024-10-22] [$2000] Android/IOS - Split/request money - Chat composer is focused after IOU request from green plus button Dec 31, 2024
@melvin-bot melvin-bot bot removed the Reviewing Has a PR in review label Dec 31, 2024
Copy link

melvin-bot bot commented Dec 31, 2024

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

Copy link

melvin-bot bot commented Dec 31, 2024

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

If no regressions arise, payment will be issued on 2025-01-07. 🎊

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

Copy link

melvin-bot bot commented Dec 31, 2024

@DylanDylann @Christinadobrzyn @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Awaiting Payment Auto-added when associated PR is deployed to production Bug Something is broken. Auto assigns a BugZero manager. Engineering External Added to denote the issue can be worked on by a contributor Weekly KSv2
Projects
Status: No status
Status: Polish
Development

No branches or pull requests