[$500] Request Money - Conversation is not scrolled to the bottom when request money #22367

lanitochka17 · 2023-07-06T18:55:58Z

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:

Navigate to a 1:1 conversation
Scroll a moderate amount of the conversation history so the latest message is not visible
On the compose box - Click the + button
Click on request money and finish the IOU flow

Expected Result:

The conversation should be scrolled to the bottom and the latest message (IOU) should be visible

Actual Result:

The conversation is not scrolled to the bottom when Request Money

Workaround:

Unknown

Platforms:

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

Version Number: 1.3.37.2

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

Bug6118824_az_recorder_20230706_192749.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~016ec292c1dce29715
Upwork Job ID: 1677287906884644864
Last Price Increase: 2023-09-12

melvin-bot · 2023-07-06T18:56:03Z

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

melvin-bot · 2023-07-06T18:56:05Z

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

PrashantMangukiya · 2023-07-07T05:09:35Z

Proposal

Posting proposal early as per new guidelines

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

Conversation is not scrolled to the bottom when request money

What is the root cause of that problem?

We are not scrolling chat to bottom during request money as shown below.

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Line 198 in 35e8d46

onConfirm={createTransaction}

App/src/pages/iou/steps/MoneyRequestConfirmPage.js

Lines 111 to 154 in 35e8d46

    
           const createTransaction = useCallback( 
        
               (selectedParticipants) => { 
        
                   const trimmedComment = props.iou.comment.trim(); 
        
                   // IOUs created from a group report will have a reportID param in the route. 
        
                   // Since the user is already viewing the report, we don't need to navigate them to the report 
        
                   if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT && CONST.REGEX.NUMBER.test(reportID.current)) { 
        
                       IOU.splitBill( 
        
                           selectedParticipants, 
        
                           props.currentUserPersonalDetails.login, 
        
                           props.currentUserPersonalDetails.accountID, 
        
                           props.iou.amount, 
        
                           trimmedComment, 
        
                           props.iou.currency, 
        
                           reportID.current, 
        
                       ); 
        
                       return; 
        
                   } 
        
                   // If the request is created from the global create menu, we also navigate the user to the group report 
        
                   if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT) { 
        
                       IOU.splitBillAndOpenReport( 
        
                           selectedParticipants, 
        
                           props.currentUserPersonalDetails.login, 
        
                           props.currentUserPersonalDetails.accountID, 
        
                           props.iou.amount, 
        
                           trimmedComment, 
        
                           props.iou.currency, 
        
                       ); 
        
                       return; 
        
                   } 
        
                   IOU.requestMoney( 
        
                       props.report, 
        
                       props.iou.amount, 
        
                       props.iou.currency, 
        
                       props.currentUserPersonalDetails.login, 
        
                       props.currentUserPersonalDetails.accountID, 
        
                       selectedParticipants[0], 
        
                       trimmedComment, 
        
                   ); 
        
               }, 
        
               [props.iou.amount, props.iou.comment, props.currentUserPersonalDetails.login, props.currentUserPersonalDetails.accountID, props.iou.currency, props.report], 
        
           );

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

We have to scroll to bottom (line 198) during confirm as shown below:

onConfirm={selectedParticipants => {
    createTransaction(selectedParticipants);
    ReportActionComposeFocusManager.focus()
}}

What alternative solutions did you explore? (Optional)

We can also scroll to bottom within createTransaction as shown below:

const createTransaction = useCallback(
    (selectedParticipants) => {
        ...
        if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT && CONST.REGEX.NUMBER.test(reportID.current)) {
            IOU.splitBill(
                ...
            );
            ReportActionComposeFocusManager.focus() // *** ADD THIS ***
            return;
        }

        if (iouType.current === CONST.IOU.MONEY_REQUEST_TYPE.SPLIT) {
            IOU.splitBillAndOpenReport(
                ...
            );
            ReportActionComposeFocusManager.focus() // *** ADD THIS ***
            return;
        }

        IOU.requestMoney(
            ...
        );
        ReportActionComposeFocusManager.focus() // *** ADD THIS ***
    },
    [...],
);

Results

Web.mov

melvin-bot · 2023-07-07T12:06:16Z

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

melvin-bot · 2023-07-07T12:06:21Z

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

melvin-bot · 2023-07-07T12:06:27Z

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

hoangzinh · 2023-07-07T13:42:52Z

Proposal

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

Request Money - Conversation is not scrolled to the bottom when request money on small screen devices

What is the root cause of that problem?

In the end of money request action, we already trigger Report.notifyNewAction, which will trigger reportScrollManager.scrollToBottom() here

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

Lines 132 to 133 in ed21fda

    
           if (isFromCurrentUser) { 
        
               reportScrollManager.scrollToBottom();

In the large screen devices, it works as expected. But in small screen devices, we have transition animation to close Request money page, and also open the Keyboard when focus on chat composer. So the reportScrollManager.scrollToBottom won't work properly.

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

I think in small screen devices, we need to wait the animation transition before the scroll to bottom. In order to do that, we can:

In this scrollToBottom function, we need to pass a flag about shouldDelay, then if it's true, we use setTimeout with CONST.ANIMATED_TRANSITION delay for this scroll logic

App/src/hooks/useReportScrollManager/index.js

Line 30 in ed21fda

flatListRef.current.scrollToOffset({animated: false, offset: 0});
And in this line, we need to pass props.isSmallScreenWidth into reportScrollManager.scrollToBottom

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

Line 133 in ed21fda

reportScrollManager.scrollToBottom();

tienifr · 2023-07-08T07:19:55Z

Proposal

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

The conversation is not scrolled to the bottom when Request Money

What is the root cause of that problem?

When we scroll to the bottom here

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

Line 133 in ed21fda

reportScrollManager.scrollToBottom();

after receiving the new report action, it's being done at the same time as many other animations like screen transition, keyboard opening, ... for small screens. So the scrollToOffset API that is used doesn't work.

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

We can just wrap this line inside InteractionManager.runAfterInteractions to make sure it's run after the other animations completed.

What alternative solutions did you explore? (Optional)

NA

s77rt · 2023-07-09T17:46:54Z

This issue is for Android/Native only right? Asking because the issue description says Android/Chrome? Assuming it's on Android/Native only, I think we can put this one on hold for #15964. The root cause seems that calling the scroll function while another animation is ongoing will do nothing. We have this commit facebook/react-native@681b35d that aborts the ongoing animation before making a new one. It may fix this issue, it would be glad if anyone can test that.

tienifr · 2023-07-10T04:41:50Z

@s77rt It's on mWeb both in Android and iOS, not Android/Native I believe.

hoangzinh · 2023-07-10T07:59:55Z

yeah, in small screen devices

NicMendonca · 2023-07-10T10:21:59Z

@allroundexperts any thoughts here?

allroundexperts · 2023-07-10T13:49:00Z

@NicMendonca We're still discussing this internally here.

allroundexperts · 2023-07-10T20:41:41Z

Okay. I went into this further and it seems like our root cause here is not correct. I tried to disable the autoFocus on the composer and added a log to the screen transition end. The scroll was being called AFTER the transition ended so I can not see how this is related to the animations. @hoangzinh or @tienifr can you do the same on your side and post a video if it works after removing the animations?

tienifr · 2023-07-13T10:56:46Z

Actually the scroll was called BEFORE RequestMoneyConfirmationPage was unmounted. Also there was a closing screen transition happening while the page unmounted. This transition will conflict with the scroll and thus it won't work. The onEntryTransitionEnd that you've tested with is only triggered when navigating to that page, not closing.

s77rt · 2023-07-13T11:29:48Z

@tienifr If we keep this page RequestMoneyConfirmationPage mounted i.e. do not dismiss the modal, will the scroll work correctly? Also anyone tested this against Freeze i.e. disable Freeze functionality?

tienifr · 2023-07-14T05:30:49Z

@s77rt @allroundexperts After digging deep into the behavior of react navigation I found out that in small screen, when users open RHN, it will set display:none for ReportScreen and it just changes to flex when the RHNs totally hide. As I mentioned above the scroll was called BEFORE RequestMoneyConfirmationPage was unmounted so scroll action is performing when display is none (no location on the page) => it doesn't work.

That why we should use InteractionManager.runAfterInteractions to wait for the the animations end and display changes to flex

NicMendonca · 2023-07-14T09:02:14Z

@allroundexperts any feedback here?

melvin-bot · 2023-09-13T11:45:39Z

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

mvtglobally · 2023-09-13T17:20:51Z

Issue not reproducible during KI retests. (Third week)

NicMendonca · 2023-09-18T22:50:15Z

@madmax330 should I close this?

madmax330 · 2023-09-19T04:38:58Z

I think we close after 4 weeks of not being reproducible

tienifr · 2023-09-19T15:13:43Z

@NicMendonca @madmax330 Currently, after request/split money, users are not redirected to chat page. We already have the ticket to handle this #27724

I think we should hold this GH until the issue is fixed

NicMendonca · 2023-09-20T21:15:59Z

@tienifr #27724 is fixed though!

@mvtglobally can you reproduce this?

NicMendonca · 2023-09-25T13:20:21Z

bump bump @mvtglobally

mvtglobally · 2023-09-25T13:32:10Z

Will provide feedback in a little bit

mvtglobally · 2023-09-25T13:34:00Z

Issue not reproducible during KI retests. (Fourth week) @NicMendonca

lanitochka17 · 2023-10-21T20:00:18Z

Issue reproducible on latest build 1.3.88-3

0-02-01-a925dfd72fb88a9cf3d4fe39d14845634e7cd89db2dbf7b0aea55c055c86ff9a_af5b384da4a76697.mp4

madmax330 · 2023-10-23T15:46:13Z

Hmm I wonder if this will create a regression somewhere?

NicMendonca · 2023-10-26T20:40:10Z

@madmax330 or maybe a regression re-caused this? 🤔 (since it was fixed for quite a while) Let me know how you think we should proceed!

madmax330 · 2023-10-27T06:55:58Z

Yes we're modifying a lot for the money 2020 and other waves right now, so I wouldn't be surprised

melvin-bot · 2023-10-30T12:50:57Z

@madmax330, @NicMendonca, @allroundexperts Whoops! This issue is 2 days overdue. Let's get this updated quick!

NicMendonca · 2023-10-30T15:15:00Z

@madmax330 so should I close, or leave open?

madmax330 · 2023-10-30T15:50:57Z

Let's close for now, we can revisit this later

lanitochka17 added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Jul 6, 2023

melvin-bot bot assigned NicMendonca Jul 6, 2023

NicMendonca added the External Added to denote the issue can be worked on by a contributor label Jul 7, 2023

melvin-bot bot changed the title ~~Request Money - Conversation is not scrolled to the bottom when request money~~ [$1000] Request Money - Conversation is not scrolled to the bottom when request money Jul 7, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Jul 7, 2023

melvin-bot bot assigned lschurr Jul 7, 2023

melvin-bot bot assigned allroundexperts Jul 7, 2023

NicMendonca unassigned lschurr Jul 7, 2023

melvin-bot bot added the Overdue label Jul 9, 2023

melvin-bot bot removed the Overdue label Jul 10, 2023

melvin-bot bot added the Overdue label Jul 13, 2023

melvin-bot bot assigned madmax330 Sep 13, 2023

melvin-bot bot added the Overdue label Sep 18, 2023

melvin-bot bot removed the Overdue label Sep 18, 2023

melvin-bot bot added the Overdue label Sep 25, 2023

melvin-bot bot removed the Overdue label Sep 25, 2023

madmax330 closed this as completed Sep 26, 2023

lanitochka17 reopened this Oct 21, 2023

melvin-bot bot added the Overdue label Oct 21, 2023

melvin-bot bot added Overdue and removed Overdue labels Oct 23, 2023

melvin-bot bot removed the Overdue label Oct 26, 2023

melvin-bot bot added the Overdue label Oct 30, 2023

melvin-bot bot removed the Overdue label Oct 30, 2023

madmax330 closed this as completed Oct 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[$500] Request Money - Conversation is not scrolled to the bottom when request money #22367

[$500] Request Money - Conversation is not scrolled to the bottom when request money #22367

lanitochka17 commented Jul 6, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jul 6, 2023

melvin-bot bot commented Jul 6, 2023 •

edited by NicMendonca

Loading

PrashantMangukiya commented Jul 7, 2023 •

edited

Loading

melvin-bot bot commented Jul 7, 2023

melvin-bot bot commented Jul 7, 2023

melvin-bot bot commented Jul 7, 2023

hoangzinh commented Jul 7, 2023 •

edited

Loading

tienifr commented Jul 8, 2023

s77rt commented Jul 9, 2023

tienifr commented Jul 10, 2023 •

edited

Loading

hoangzinh commented Jul 10, 2023

NicMendonca commented Jul 10, 2023

allroundexperts commented Jul 10, 2023

allroundexperts commented Jul 10, 2023

tienifr commented Jul 13, 2023 •

edited

Loading

s77rt commented Jul 13, 2023

tienifr commented Jul 14, 2023 •

edited

Loading

NicMendonca commented Jul 14, 2023

melvin-bot bot commented Sep 13, 2023

mvtglobally commented Sep 13, 2023

NicMendonca commented Sep 18, 2023

madmax330 commented Sep 19, 2023

tienifr commented Sep 19, 2023 •

edited

Loading

NicMendonca commented Sep 20, 2023

NicMendonca commented Sep 25, 2023

mvtglobally commented Sep 25, 2023

mvtglobally commented Sep 25, 2023

lanitochka17 commented Oct 21, 2023

madmax330 commented Oct 23, 2023

NicMendonca commented Oct 26, 2023

madmax330 commented Oct 27, 2023

melvin-bot bot commented Oct 30, 2023

NicMendonca commented Oct 30, 2023

madmax330 commented Oct 30, 2023

[$500] Request Money - Conversation is not scrolled to the bottom when request money #22367

[$500] Request Money - Conversation is not scrolled to the bottom when request money #22367

Comments

lanitochka17 commented Jul 6, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Jul 6, 2023

melvin-bot bot commented Jul 6, 2023 • edited by NicMendonca Loading

Bug0 Triage Checklist (Main S/O)

PrashantMangukiya commented Jul 7, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Jul 7, 2023

melvin-bot bot commented Jul 7, 2023

melvin-bot bot commented Jul 7, 2023

hoangzinh commented Jul 7, 2023 • edited Loading

Proposal

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

What is the root cause of that problem?

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

tienifr commented Jul 8, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

s77rt commented Jul 9, 2023

tienifr commented Jul 10, 2023 • edited Loading

hoangzinh commented Jul 10, 2023

NicMendonca commented Jul 10, 2023

allroundexperts commented Jul 10, 2023

allroundexperts commented Jul 10, 2023

tienifr commented Jul 13, 2023 • edited Loading

s77rt commented Jul 13, 2023

tienifr commented Jul 14, 2023 • edited Loading

NicMendonca commented Jul 14, 2023

melvin-bot bot commented Sep 13, 2023

mvtglobally commented Sep 13, 2023

NicMendonca commented Sep 18, 2023

madmax330 commented Sep 19, 2023

tienifr commented Sep 19, 2023 • edited Loading

NicMendonca commented Sep 20, 2023

NicMendonca commented Sep 25, 2023

mvtglobally commented Sep 25, 2023

mvtglobally commented Sep 25, 2023

lanitochka17 commented Oct 21, 2023

madmax330 commented Oct 23, 2023

NicMendonca commented Oct 26, 2023

madmax330 commented Oct 27, 2023

melvin-bot bot commented Oct 30, 2023

NicMendonca commented Oct 30, 2023

madmax330 commented Oct 30, 2023

lanitochka17 commented Jul 6, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Jul 6, 2023 •

edited by NicMendonca

Loading

PrashantMangukiya commented Jul 7, 2023 •

edited

Loading

hoangzinh commented Jul 7, 2023 •

edited

Loading

tienifr commented Jul 10, 2023 •

edited

Loading

tienifr commented Jul 13, 2023 •

edited

Loading

tienifr commented Jul 14, 2023 •

edited

Loading

tienifr commented Sep 19, 2023 •

edited

Loading