[HOLD for payment 2022-10-31] [$250] Chat - Composer goes to the top on pressing expand @thesahindia

[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. Go to staging.new.expensify.com
2. Navigate to any chat
3. Add few lines and press expand button at the left corner

Expected Result:

The composer should expand and shouldn't move

Actual Result:

The composer goes to the top

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web
• Desktop App
• Mobile Web/safari

Version Number: 1.2.9.0

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

Screenrecording_20220926_182030.mp4

Expensify/Expensify Issue URL:

Issue reported by: @thesahindia

Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1664196729312989

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @laurenreidexpensify (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[Puneet-here]

Proposal

It is happening because the ReportActionCompose is wrapped by OfflineWithFeedback

App/src/pages/home/ReportScreen.js

Lines 290 to 296 in b058975

	<OfflineWithFeedback
	pendingAction={addWorkspaceRoomPendingAction}
	>
	<ReportActionCompose
	onSubmit={this.onSubmitComment}
	reportID={reportID}
	reportActions={this.props.reportActions}

To solve it we need to use style.h100 for the View at 90 and 92
We can pass styles for the first View using style but we will have to add another prop to pass style to 92 or we can just use styles.h100 or styles.flex1 because it's not breaking anything.

App/src/components/OfflineWithFeedback.js

Lines 90 to 94 in b058975

	<View style={props.style}>
	{!hideChildren && (
	<View style={needsOpacity ? styles.offlineFeedback.pending : {}}>
	{children}
	</View>

[melvin-bot]

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

[amyevans]

Reproducible, releasing to External. A reminder @Puneet-here that you need to wait for the Help wanted label before submitting proposals, thanks! 😄

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[laurenreidexpensify]

Not overdue, reviewing this morning

[Beamanator]

Yep ^ @rushatgabhane would you mind reviewing the one proposal in this issue today?

[laurenreidexpensify]

https://www.upwork.com/jobs/~01b201949be1d1680f

[rushatgabhane]

It is happening because the ReportActionCompose is wrapped by OfflineWithFeedback

@Puneet-here It is no longer the case in main. Could you please submit an updated proposal?

[rushatgabhane]

@Beamanator apologies for the delay, im 100% back now

[aimane-chnaif]

Proposal

RCA:

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

Lines 89 to 103 in eb26cc4

	<View style={[this.getChatFooterStyles(), this.props.isComposerFullSize && styles.chatFooterFullCompose]}>
	<SwipeableView onSwipeDown={Keyboard.dismiss}>
	<OfflineWithFeedback
	pendingAction={this.props.addWorkspaceRoomPendingAction}
	>
	<ReportActionCompose
	onSubmit={this.props.onSubmitComment}
	reportID={this.props.report.reportID.toString()}
	reportActions={this.props.reportActions}
	report={this.props.report}
	isComposerFullSize={this.props.isComposerFullSize}
	/>
	</OfflineWithFeedback>
	</SwipeableView>
	</View>

This happens because when composer expanded, the parent view (OfflineWithFeedback) doesn't stretch to full height so this.props.isComposerFullSize && styles.chatItemFullComposeRow in ReportActionCompose container style isn't applied so it doesn't stretch to full height.

Solution:
We need to apply same conditional style to OfflineWithFeedback as in ReportActionCompose when expanded.
OfflineWithFeedback is general component which is used throughout the app so style props should be passed

                            <OfflineWithFeedback
                                pendingAction={this.props.addWorkspaceRoomPendingAction}
+                               style={this.props.isComposerFullSize && styles.chatItemFullComposeRow}
+                               contentContainerStyle={this.props.isComposerFullSize && styles.flex1}
                            >
                                <ReportActionCompose
                                    onSubmit={this.props.onSubmitComment}
                                    reportID={this.props.report.reportID.toString()}
                                    reportActions={this.props.reportActions}
                                    report={this.props.report}
                                    isComposerFullSize={this.props.isComposerFullSize}
                                />
                            </OfflineWithFeedback>

And in https://github.com/Expensify/App/blob/main/src/components/OfflineWithFeedback.js,

        <View style={props.style}>
            {!hideChildren && (
-               <View style={needsOpacity ? styles.offlineFeedback.pending : {}}>
+               <View style={[needsOpacity ? styles.offlineFeedback.pending : {}, props.contentContainerStyle]}>
                    {children}
                </View>
            )}

[rushatgabhane]

@aimane-chnaif's proposal is too similar to @Puneet-here's proposal.

And @Puneet-here most likely would have submitted an updated proposal same as @aimane-chnaif's proposal

[rushatgabhane]

@Beamanator I think we should hire @Puneet-here because they were first.

C+ reviewed 🎀 👀 🎀

[Beamanator]

Makes sense to me @rushatgabhane

[aimane-chnaif]

@Puneet-here's proposal didn't explain that those styles needed only when composer expanded (this.props.isComposerFullSize === true).
WIthout this condition, it works on web but breaks style on mobile.
Since this is important flag, I came to submit proposal though already proposal exists

[rushatgabhane]

Agree with @aimane-chnaif, @Beamanator sorry for the back and forth but I think we should hire @aimane-chnaif

[Beamanator]

Ooh thanks for bringing that up @aimane-chnaif , this one is tough since the proposal are both small, but I agree with @rushatgabhane let's change up who was hired 👍

[melvin-bot]

📣 @aimane-chnaif You have been assigned to this job by @Beamanator!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[aimane-chnaif]

Thanks @rushatgabhane @Beamanator
PR is ready for review

[Beamanator]

PR under review, should be merged soon 👍

[melvin-bot]

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

• fix "Composer goes to the top on pressing expand" #11608

If no regressions arise, payment will be issued on 2022-10-31. 🎊

[laurenreidexpensify]

Payments:

• @thesahindia issue reporter PAID
• @rushatgabhane Contributor Plus reviewer
• @aimane-chnaif Contributor

@rushatgabhane @aimane-chnaif as soon as you've accepted job in Upwork I will issue payment. Thanks

[laurenreidexpensify]

Everyone has been paid 👍