[$2000] IOS - Chat - The Pay button in the money request is cut off if the request comes in an open chat

[kbecciv]

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 chat 1:1 with Account A and Account B
2. From any device (Account A) send money request to Account B in open chat (then you can send one or two more) - tester was using IOS device.
3. Settle Payment So You Paid Component Appears.
4. Again request money on the same account (Account B) from (Account A).

Expected Result:

The money request is fully visible, including the Pay button

Actual Result:

The 'Pay' button is cut off and you need to scroll up to see it

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.88.1

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): fischer9966+060122@gmail.com/Qwerty123

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

Bug5677361_pay-cut-iPhone-XS.mp4

Bug5677361_pay-cut-off-iPhone-13-Pro.mp4

Bug5677361_pay-cutoff-iPad.mp4

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

Issue reported by: Applause - Internal Team

Slack conversation:

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

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

[stephanieelliott]

Posted to Upwork: https://www.upwork.com/jobs/~01a2b7049d03140226

[melvin-bot]

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

[melvin-bot]

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

[Satishpethani92]

Screen.Recording.2022-08-09.at.11.37.00.AM.mov

I have setup code in my pc and created two different users as per the instruction. and try to transfer amount but didn't find second user.

So let me know if i have missed any step in setup process.

Thank you @stephanieelliott

[syedsaroshfarrukhdot]

Proposal

App/src/components/InvertedFlatList/BaseInvertedFlatList.js

Line 157 in 151ec1a

maintainVisibleContentPosition={{minIndexForVisible: 0, autoscrollToTopThreshold: 0}}

The issue caused here is due to maintainVisibleContentPosition props which is causing issue of maintaining scroll when IOUPreview Component is rendered because when set maintainVisibleContentPosition, the scroll view will adjust the scroll position so that the first child that is currently visible and at or beyond minIndexForVisible will not change position. As there are multiple childrens passed to the ReportActionItem.js when you backtrack so i guess that's why the sroll view doesn't adjust itself properly.

Solution :

The issue is fixed when you remove line

App/src/components/InvertedFlatList/BaseInvertedFlatList.js

Line 157 in 151ec1a

maintainVisibleContentPosition={{minIndexForVisible: 0, autoscrollToTopThreshold: 0}}

Flat List Compent becomes

<FlatList

            // eslint-disable-next-line react/jsx-props-no-spreading
            {...this.props}
            ref={this.props.innerRef}
            inverted
            renderItem={this.renderItem}

            // Native platforms do not need to measure items and work fine without this.
            // Web requires that items be measured or else crazy things happen when scrolling.
            getItemLayout={this.props.shouldMeasureItems ? this.getItemLayout : undefined}

            // We keep this property very low so that chat switching remains fast
            maxToRenderPerBatch={1}
            windowSize={15}
            removeClippedSubviews={this.props.shouldRemoveClippedSubviews}

/>

Before Fixing:-

After Fixing :-

Simulator.Screen.Recording.-.iPhone.13.Pro.-.2022-08-09.at.12.58.29.mp4

[Santhosh-Sellavel]

Screen.Recording.2022-08-09.at.11.37.00.AM.mov
I have setup code in my pc and created two different users as per the instruction. and try to transfer amount but didn't find second user.

So let me know if i have missed any step in setup process.

Thank you @stephanieelliott

@Satishpethani92
Enter full user email in search for the first time, to initiate chat with any new user.

[Santhosh-Sellavel]

@kbecciv is this still reproducible for you, unable to reproduce at my end.

[syedsaroshfarrukhdot]

@Santhosh-Sellavel it is reproducible on IOS only for me too. I wasn't able to reproduce it on desktop, web or android.

[Santhosh-Sellavel]

I checked only on iOS only first but was unable to reproduce it.

[johncschuster]

Thanks for confirming that! Sorry for the flub on my part!

[mvtglobally]

Issue not reproducible during KI retests. (Fifth week) Lets close this one guys

[syedsaroshfarrukhdot]

@johncschuster Am i eligible for 50% bonus here as my PR was merged within 3 business days.

[Santhosh-Sellavel]

@syedsaroshfarrukhdot No, this PR is not eligible for the bonus. Issues that got assigned on or after Nov 4 and respective PRs that are created after that are only eligible!

cc: @johncschuster

[syedsaroshfarrukhdot]

@syedsaroshfarrukhdot No, this PR is not eligible for the bonus. Issues that got assigned on or after Nov 4 and respective PRs that are created after that are only eligible!

cc: @johncschuster

Thanks for clarifying.

[neil-marcellini]

@johncschuster I updated some of the steps in the checklist. Could you please create a regression test issue and start a discussion in Slack?

[Santhosh-Sellavel]

not overdue

[mvtglobally]

Issue not reproducible during KI retests. (6th week) Can I remove this from our checklist. It is no longer repro as per steps

[tjferriss]

@johncschuster I'm going through the weekly review of bugs. What remains to close this out?

[johncschuster]

@tjferriss As far as I can tell, the only remaining step here is the regression test conversation in Slack. I'm following the SO here to do that.

[melvin-bot]

@johncschuster, @neil-marcellini, @syedsaroshfarrukhdot, @Santhosh-Sellavel Huh... This is 4 days overdue. Who can take care of this?

[neil-marcellini]

How's the regression test coming along @johncschuster?

[melvin-bot]

@johncschuster, @neil-marcellini, @syedsaroshfarrukhdot, @Santhosh-Sellavel Eep! 4 days overdue now. Issues have feelings too...

[neil-marcellini]

Bump @johncschuster

[trjExpensify]

👋 Adding the Reviewing label as this should have been added once the associated PR went into review initially.

[johncschuster]

Sorry for the delay! The ^GH for regression steps is up

[melvin-bot]

@johncschuster, @neil-marcellini, @syedsaroshfarrukhdot, @Santhosh-Sellavel Whoops! This issue is 2 days overdue. Let's get this updated quick!

[neil-marcellini]

The regressions steps were added 2 days ago so I think we're all set.