[regression] [HOLD til 03-04-2024] Expense - Expanded confirmation page is collapsed when returning from Amount

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.38-1
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
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Start manual request flow
4. Proceed to confirmation page
5. Click Show more to expand the page
6. Click Date > back button
7. Note that the page is not collapsed
8. Repeat Step 5 with Date, Merchant, Description and Amount

Expected Result:

When returning to confirmation page from each row, the confirmation page will remain expanded

Actual Result:

When returning to confirmation page from Amount, the confirmation page is collapsed

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6370907_1707338508460.20240208_015624.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b2c64eb58af55274
• Upwork Job ID: 1755336478259703808
• Last Price Increase: 2024-02-14
• Automatic offers:
• shubham1206agra | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01b2c64eb58af55274

[melvin-bot]

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #wave5
CC @dylanexpensify

[Krishna2323]

Proposal

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

Expense - Expanded confirmation page is collapsed when returning from Amount

What is the root cause of that problem?

Due to conditional rendering the component unmounts and the shouldExpandFields sets back to false state, which is the initial state.

App/src/pages/iou/request/step/IOURequestStepConfirmation.js

Lines 401 to 404 in 6135313

	{isLoading ? (
	<FullScreenLoadingIndicator />
	) : (
	<MoneyRequestConfirmationList

App/src/pages/iou/request/step/IOURequestStepConfirmation.js

Lines 376 to 378 in 6135313

	// This loading indicator is shown because the transaction originalCurrency is being updated later than the component mounts.
	// To prevent the component from rendering with the wrong currency, we show a loading indicator until the correct currency is set.
	const isLoading = !!(transaction && transaction.originalCurrency);

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

Move the const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false); to parent component IOURequestStepConfirmation and update its value in MoneyTemporaryForRefactorRequestConfirmationList.

    // Add this in `IOURequestStepConfirmation`and pass `shouldExpandFields` & `toggleShouldExpandFields` to `MoneyRequestConfirmationList` as props
    // A flag and a toggler for showing the rest of the form fields
    const [shouldExpandFields, toggleShouldExpandFields] = useReducer((state) => !state, false);

PS: I don't think it will cause a optimization issue if we are re-render just for amount update.

Result

show_more_expand.mp4

[ZhenjaHorbach]

Proposal

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

Expense - Expanded confirmation page is collapsed when returning from Amount

What is the root cause of that problem?

Actually this is an expected issue

App/src/pages/iou/request/step/IOURequestStepConfirmation.js

Lines 401 to 404 in 6135313

	{isLoading ? (
	<FullScreenLoadingIndicator />
	) : (
	<MoneyRequestConfirmationList

Since when we open the screen we always show the loader and reset the MoneyRequestConfirmationList screen including the state of shouldExpandFields

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

To fix this issue we can refactor a bit this code

I don't see any reason to reset all component
Instead, I would suggest using opacity
And when isLoading is true we just hide this component

Which will be much more optimized than constantly rendering the component.

                    {isLoading && <FullScreenLoadingIndicator />}
                    <View style={[styles.flex1, isLoading && styles.opacity0]}>
                        <MoneyRequestConfirmationList >
                    </View>

App/src/pages/iou/request/step/IOURequestStepConfirmation.js

Lines 401 to 404 in 6135313

	{isLoading ? (
	<FullScreenLoadingIndicator />
	) : (
	<MoneyRequestConfirmationList

Screen.Recording.2024-02-07.at.22.24.39.mov

What alternative solutions did you explore? (Optional)

NA

[abzokhattab]

Proposal

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

Expense - Expanded confirmation page is collapsed when returning from Amount

What is the root cause of that problem?

the confirmation page was rerendered because of the switching between loading and listing the component

App/src/pages/iou/request/step/IOURequestStepConfirmation.js

Lines 401 to 404 in 6135313

	{isLoading ? (
	<FullScreenLoadingIndicator />
	) : (
	<MoneyRequestConfirmationList

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

we need to move the isloading condition and this inside the MoneyRequestConfirmationList to prevent rerendering

alternatively

we can keep the isloading condition and pass the value to a new prop we need to define ->isLoading in the MoneyRequestConfirmationList component

[Pujan92]

Isn't it regression from #34075?