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

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:

Go to staging.new.expensify.com
Go to workspace chat
Start manual request flow
Proceed to confirmation page
Click Show more to expand the page
Click Date > back button
Note that the page is not collapsed
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?

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

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

@thesahindia

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

@stephanieelliott

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

@dylanexpensify

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

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

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

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

Isn't it regression from #34075?

@shubham1206agra

📣 @shubham1206agra 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer 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 📖

@abzokhattab

@abzokhattab For context, sometimes new issues are created by our QA team under the assumption that it is a bug, and we don't yet realize that it is actually a regression. So the standard labels are applied (which includes Help Wanted) and the issue is treated like a basic bug issue until someone (usually the C+) realizes that it's a regression and notes it on the issue, and the original PR author and/or C+ confirms it.

The Help Wanted label just means that the issue is labeled External but no one has been assigned on the issue to fix it -- it is auto-removed once there is an assignee on the issue. So I understand why that's probably confusing in this case. However in the case of regressions, the original PR author will always be assigned to fix it as we do not pay for regressions (i.e. you'll get paid fixing the original issue, but we do not pay for fixing any regressions that you caused).

@stephanieelliott

Aha i see … thanks you so much for the clarification @stephanieelliott

@rlinoz

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

@rlinoz

hi @rlinoz could you help to 2nd review the PR here #36586? Thanks

PR is on staging

The PR was deployed to prod today. Putting a 7 day hold on this just for good measure, but no payment is due seeing as this is a regression.

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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?

Result

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)

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?

alternatively

21 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

	// 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);

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Feb 7, 2024

melvin-bot commented on Feb 7, 2024

melvin-bot commented on Feb 7, 2024

lanitochka17 commented on Feb 7, 2024

Krishna2323 commented on Feb 7, 2024

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?

Result

ZhenjaHorbach commented on Feb 7, 2024

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)

abzokhattab commented on Feb 7, 2024

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?

alternatively

Pujan92 commented on Feb 8, 2024

21 remaining items

melvin-bot commented on Feb 15, 2024

stephanieelliott commented on Feb 15, 2024

abzokhattab commented on Feb 15, 2024

melvin-bot commented on Feb 18, 2024

hoangzinh commented on Feb 18, 2024

stephanieelliott commented on Feb 19, 2024

stephanieelliott commented on Feb 27, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions