[$8000] Compose box disappears when user edit message and press "New message" button.

[kavimuru]

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. Login with any account
2. Click into a chat that has many messages
3. Mark last message as unread
4. Scroll up so that the "unread" last message is out of view
5. Tap "Edit message" on any of your messages
6. Don't make any changes to the message
7. Tap on the "New Message" button at the top of the screen
8. You are brought down to the "unread" message. Note that the compose box is gone so you cannot write any new messages. 🔴
9. Tap Back to return to chat list
10. Tap into the chat you are testing with again
11. Scroll up to the message you were editing
12. Note that it's still in edit mode and has the "Cancel" and "Save Changes" buttons showing 🔴

Expected Result:

Result expected by Kavi

Composer should be visible and scroll be should be on the right when you open a the report.

Result expected by Sonia

If you tap "New Message" it should bring you to the unread message and should show you the composer at the bottom of the chat. When you leave the chat and go back the message should not remain in edit mode and you should see the composer at the bottom of the chat.

Actual Result:

The Composer is still missing and when you tried to scroll, scroll bar is on the left.

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] iOS / native

Version Number: 1.2.72-0 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:

https://user-images.githubusercontent.com/43996225/219454448-57745d6f-a326-423c-9a13-f2d81d565a89.MP4

https://user-images.githubusercontent.com/43996225/219454481-2f4eeb5d-334e-4d70-bcef-31bf67aab3e5.mov

Expensify/Expensify Issue URL: Issue reported by: @hungvu193 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1676518791786289

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0152a52b263a42cee8
• Upwork Job ID: 1629212143551795200
• Last Price Increase: 2023-04-27

[MelvinBot]

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

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• [x] This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• [x] 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
• [x] 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.
• [x] 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.
• [x] I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[MelvinBot]

@sonialiap Huh... This is 4 days overdue. Who can take care of this?

[sonialiap]

I cannot reproduce on iPhone 13 v 15.4

https://user-images.githubusercontent.com/17131195/220679545-2734d897-3c70-4d07-9d11-07d0162414bf.mp4

[sonialiap]

PrashantMangukiya was able to reproduce

https://user-images.githubusercontent.com/17131195/220693776-a6ecd56a-7785-4cc4-9e5a-ddbc375f9a2b.mov

[sonialiap]

I can reproduce, thanks PrashantMangukiya for correcting the steps I was taking

https://user-images.githubusercontent.com/17131195/220884079-23fb8ae6-7749-4c38-932b-49100735c66f.mp4

1. Click into a chat
2. Mark the bottom message as unread
3. Scroll up
4. Select "Edit" on a message you wrote
5. Don't make any changes to the message you're editing
6. Tap on the "New Message" button at the top of the screen
7. You are brought back down to the unread message ✅ . However, the compose box is gone so you cannot write any new messages 🔴

Before taking the above steps

After taking the above steps

8. Go back to chat list
9. Tap into the chat you were testing with again
10. Scroll up to the message you were editing
11. Note that it's still in edit mode and has the "Cancel" and "Save Changes" buttons showing

Current Behavior:

Tapping "New Message" while in edit mode hides the composer at the bottom of the screen. If you tap out of the chat and back in without saving/canceling your edit then the message remains in edit mode until you save or cancel the changes.

Expected Result:

If you tap "New Message" it should bring you to the unread message and should show you the composer at the bottom of the chat. When you leave the chat and go back the message should not remain in edit mode and you should see the composer at the bottom of the chat.

Updated OP with step and Expected Result clarification.

[MelvinBot]

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

[sonialiap]

@chiragsalian I agree with Kavi that the composer should be visible at the bottom of the chat even if you're in edit mode on a message higher up in the chat. I cannot reproduce the composer not showing up if you tap out and back into the chat, it shows up for me. I think that edit mode should be canceled when you tap out of the chat, but that is not the issue that was reported here.

[chiragsalian]

Interesting, yeah i can reproduce the issue. Marking it as external.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~0152a52b263a42cee8

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[PrashantMangukiya]

Proposal

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

Whenever user edits message from top of the chat and press "New message" button, at that time it will scroll back to latest chat but chat compose box does not show i.e. chat compose box will disappear.

What is the root cause of that problem?

Whenever we edit any message from the top of the chat at that time composer gets hidden. Meanwhile when we tap "New message" at that time we will scroll to the bottom of chat, but we do not take care to show composer by assuming that composer is already visible. So in this situation composer remain hidden.

https://github.com/Expensify/App/blob/94057baaf27d1f6c28277fc5cd713ee42ec10ada/src/pages/home/report/ReportActionsView.js#L297-L300

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

To solve this we have to call toggle report action compose view from scrollToBottomAndMarkReportAsRead() function within src/pages/home/report/ReportActionsView.js file as shown under:

 scrollToBottomAndMarkReportAsRead() { 
    toggleReportActionComposeView(true, this.props.isSmallScreenWidth);
    ....
 } 

So using this solution it will scroll down to new message and show compose box (instead of disappear) as shown in result video and also solve the scroll bar showing on the left issue.

With this solution it will not automatically take you out from edit mode. It is different issue and I think it should be handled separately.

What alternative solutions did you explore? (Optional)

None

Result iOS

https://user-images.githubusercontent.com/7823358/219714017-50600451-a3df-4890-a7c6-88082e9a61f1.mp4

[MelvinBot]

📣 @PrashantMangukiya! 📣

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>

[allroundexperts]

I think it will make more sense to add toggleReportActionComposeView to the function here. At this place, we can check if scroll offset is close to 0. If so, we can then show the composer input. This way, the composer bar will be visible even if the users scroll to the bottom of the page (without clicking that button). What do you think @PrashantMangukiya?

[PrashantMangukiya]

@allroundexperts Thank you for suggestion. But adding content offset condition as shown below code is creating another weird situation.

trackScroll({nativeEvent}) {
        this.currentScrollOffset = -nativeEvent.contentOffset.y;
        if (this.currentScrollOffset > -300) {
            toggleReportActionComposeView(true, this.props.isSmallScreenWidth);
        }
        this.toggleFloatingMessageCounter();
    }
}

i.e. If user will go to edit record somewhere near the bottom, then it will also show composer and edit form both as shown in video. So I think checking the scroll offset may not be good idea. Thanks.

iOS Video

https://user-images.githubusercontent.com/7823358/221340200-5441edae-a5a3-4779-80e8-dd3105dc888a.mp4

[s77rt]

Proposal

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

Main Composer not getting visible after clicking on "New messages" button while a Edit Composer is focused.

What is the root cause of that problem?

On native, clicking outside a text input does not blur the text input.

The reason this is hardly reproducible on Android is that Android automatically blurs the active input if it gets out of view.

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

Blur the text input on "New messages" button click. The easiest way of doing this is by dismissing the keyboard i.e. call Keyboard.dismiss() here.

What alternative solutions did you explore? (Optional)

None

[chiragsalian]

Not overdue melvin, in process of proposal review.

[parasharrajat]

I am trying to think of expected behavior on this issue.

The requested behavior will interfere with draft functionality. I might open a new discussion on this.

[MelvinBot]

@chiragsalian @sonialiap @parasharrajat this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[MelvinBot]

@chiragsalian, @sonialiap, @parasharrajat Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MelvinBot]

@chiragsalian, @sonialiap, @parasharrajat Still overdue 6 days?! Let's take care of this!

[parasharrajat]

I will open the discussion shortly. Before I do, I want to understand the proposed behavior in the proposals.

@PrashantMangukiya @s77rt Can you please tell me what should the expected behavior is in your understanding?

Also, we have a draft feature. I think that should not be affected by the proposed changes. That's why we keep the edited box open even if report is closed.

[s77rt]

@parasharrajat Thanks for taking the time for the review. This has nothing to do with draft functionality. The expected behaviour is that clicking on "New messages" button will scroll to the bottom and the main composer being visible (same as on mWeb).

[parasharrajat]

IMO, I can perceive two issues from the reproduction steps.

1. When you click on the new messages button, the composer is not available to write messages. As the edited message is deep inside the chat history, it is unclear why the composer is hidden. The user might not remember that he left a draft message on a report if he does not interact with that chat for a long time.

2. Second is that when we reopen the chat from the chat list, the previously edited messages are kept in edited mode. Again, after a long time, the user might not remember that there is a draft message for that report.

2 is intentional to the point that we keep the comments in edited mode even though the report is closed. This is our draft comment feature. But I think a real problem could be that user will not know if there are any drafts for that report if a deeply nested message from history was edited in past.

[parasharrajat]

Thanks, @s77rt Can you please lay down the whole flow of the report in the following cases:

1. A message from history was edited and the new message was clicked.
2. User clicked back on the edited message.
3. User went back to the LHN list & reopened the same report.

cc: @PrashantMangukiya

[s77rt]

I don't see how this is related to this issue. This is actually the current behaviour on mWeb. We are just matching the behaviour here.

[PrashantMangukiya]

I think in this issue we have to handle composer box disappear problem when user go for edit message and press New message button to scroll the bottom of the list. Because here this problem occurs specific to iOS.

Because to change draft behaviour it needs separate discussion and change flow accordingly for all platforms. So change draft functionality can be handled separately.

Thanks @parasharrajat and @s77rt for your time.

[MelvinBot]

@chiragsalian @sonialiap @parasharrajat this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!