[HOLD for payment 2024-11-29] [$375] Card - Android - when user goes back to amount step in the flow the cursor is at the beginning instead of the end of the amount

@muttmuure

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: 9.0.57-3
Reproducible in staging?: Y
Reproducible in production?: Y
Issue reported by: Applause Internal Team

Action Performed:

Launch app
Login with account with expensify card enabled with bank account added, and few members invited in workspace
Go to workspace settings
Tap expensify card
Tap issue card
Select a user - physical card -monthly
Go to confirmation page
Navigate tapping app's back button
Note cursor shown at beginning at set limit page

Expected Result:

We should always add the cursor to the end of the amount input field

Actual Result:

When going back to the amount field, we put the cursor to the start of the amount which is bad UX

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6655220_1730794710561.Screenrecorder-2024-11-05-13-32-37-9_compress_1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021854516214587143362
Upwork Job ID: 1854516214587143362
Last Price Increase: 2024-11-14
Automatic offers:

ikevin127 | Contributor | 104952317

Issue Owner

Current Issue Owner: @muttmuure

@muttmuure

Triggered auto assignment to @muttmuure (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

@mountiny

Should the value be cleared when we select another assignee? It was not something that was required in the docs.
I think the form should be cleared only when we exit the flow or we submit the form to issue the card.
And I don't think it's something we would like to change - let's say we went to confirmation step - all the data is ok, but we want to change the assignee only - when we confirm that and we're redirected back to confirmation page the value would be empty. (I wonder if the error would appear, not sure about that).
The only value we want to change in this case is the default card name (for physical card) to be updated to the newly selected user's name i.e. User's Card to NewUser's Card. It has been already implemented.

cc @mountiny

Proposal

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

Card - Android - "Set a limit" amount selected for previous user is displayed

What is the root cause of that problem?

We're not clearing the the limit when selecting assignee

App/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx

Lines 43 to 56 in b1bffa6

    
           const data: Partial<IssueNewCardData> = { 
        
               assigneeEmail: assignee?.login ?? '', 
        
           }; 
        
           if (isEditing && issueNewCard?.data?.cardTitle === Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(issueNewCard?.data?.assigneeEmail, 'firstName'))) { 
        
               // If the card title is the default card title, update it with the new assignee's name 
        
               data.cardTitle = Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(assignee?.login ?? '', 'firstName')); 
        
           } 
        
           Card.setIssueNewCardStepAndData({ 
        
               step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.CARD_TYPE, 
        
               data, 
        
               isEditing: false, 
        
           });

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

We need to reset the limit value by adding limit: 0 to this variable if the previous assignee and the current assignee email login is not same

App/src/pages/workspace/expensifyCard/issueNew/AssigneeStep.tsx

Lines 43 to 45 in b1bffa6

    
           const data: Partial<IssueNewCardData> = { 
        
               assigneeEmail: assignee?.login ?? '', 
        
           };

We can't pass limit: undefined because Onyx will not apply the undefined value to the limit property
And for null value the type of limit is number or undefined because it's optional, so when pass null value it will throw an error unless we add the null type to the limit property

const submit = (assignee: ListItem) => {
    const data: Partial<IssueNewCardData> = issueNewCard?.data.assigneeEmail === assignee.login ? {
        assigneeEmail: assignee?.login ?? '',
    } : {
        assigneeEmail: assignee?.login ?? '',
        limit: 0
    };

    if (isEditing && issueNewCard?.data?.cardTitle === Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(issueNewCard?.data?.assigneeEmail, 'firstName'))) {
        // If the card title is the default card title, update it with the new assignee's name
        data.cardTitle = Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(assignee?.login ?? '', 'firstName'));
    }

    Card.setIssueNewCardStepAndData({
        step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.CARD_TYPE,
        data,
        isEditing: false,
    });
};

And inside the limit input we should fallback the default value to undefined if the limit value is 0 so it start with empty value

App/src/pages/workspace/expensifyCard/issueNew/LimitStep.tsx

Line 90 in b1bffa6

    
           defaultValue={CurrencyUtils.convertToFrontendAmountAsString(issueNewCard?.data?.limit, CONST.CURRENCY.USD, false)}

defaultValue={CurrencyUtils.convertToFrontendAmountAsString(issueNewCard?.data?.limit || undefined, CONST.CURRENCY.USD, false)}

What alternative solutions did you explore? (Optional)

@shawnborton

Triggered auto assignment to @shawnborton (Design), see these Stack Overflow questions for more details.

@shawnborton

Good questions, I feel like we do not want to reset it, think that you want to go over the step back and to select different value in the previous step and then you continue to the amount again - I would want to keep the amount I already inserted.

@shawnborton do you agree with that expected results, hence close this issue?

Yeah, I agree with your analysis Vit - I don't think we need to reset the limit in this stepped flow personally, I think it makes sense to keep it here. cc @Expensify/design just for visibility but I think they might agree?

@muttmuure

cc @muttmuure for visibility

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other: react-native external package issue.

Where bug was reported:

2a. Reported on production
2b. Reported on staging (deploy blocker)
2c. Reported on both staging and production
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: N/A as this was a react-native external package issue.
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: N/A as this was a react-native external package issue.
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue:

Regression Test Proposal

Launch Android: Native app.
Login with account with expensify card enabled with bank account added, and few members invited in workspace.
Go to workspace settings.
Tap expensify card.
Tap issue card.
Select a user -> physical card -> monthly.
Input an amount in the Set a limit amount page.
Go to confirmation page.
Navigate back to the Set a limit amount page.
Verify that the cursor caret is at the end of amount, not at the begginning right after the currency symbol.

Do we agree 👍 or 👎.

@shawnborton

@shawnborton, @mananjadhav, @mountiny, @muttmuure, @ikevin127 Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

@ikevin127

@ikevin127 - $375 C (Paid)
@mananjadhav - $375 C+

@muttmuure

~~@muttmuure I am going to hold raising a request on NewDot as all my payouts for November have some issue.~~

Raised my request on NewDot.

Not overdue, this can be set to Weekly until the remaining payment is handled.

@mananjadhav

$375 approved for @mananjadhav

Navigation Menu

Repository navigation

[HOLD for payment 2024-11-29] [$375] Card - Android - when user goes back to amount step in the flow the cursor is at the beginning instead of the end of the amount #52029

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?

What alternative solutions did you explore? (Optional)

50 remaining items

BugZero Checklist:

Regression Test Proposal

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const data: Partial<IssueNewCardData> = {
	assigneeEmail: assignee?.login ?? '',
	};

	if (isEditing && issueNewCard?.data?.cardTitle === Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(issueNewCard?.data?.assigneeEmail, 'firstName'))) {
	// If the card title is the default card title, update it with the new assignee's name
	data.cardTitle = Card.getCardDefaultName(PersonalDetailsUtils.getUserNameByEmail(assignee?.login ?? '', 'firstName'));
	}

	Card.setIssueNewCardStepAndData({
	step: isEditing ? CONST.EXPENSIFY_CARD.STEP.CONFIRMATION : CONST.EXPENSIFY_CARD.STEP.CARD_TYPE,
	data,
	isEditing: false,
	});

[HOLD for payment 2024-11-29] [$375] Card - Android - when user goes back to amount step in the flow the cursor is at the beginning instead of the end of the amount #52029

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Nov 5, 2024

koko57 commented on Nov 5, 2024

NJ-2020 commented on Nov 5, 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)

melvin-bot commented on Nov 6, 2024

mountiny commented on Nov 6, 2024

shawnborton commented on Nov 6, 2024

50 remaining items

ikevin127 commented on Nov 29, 2024

ikevin127 commented on Nov 29, 2024

BugZero Checklist:

Regression Test Proposal

melvin-bot commented on Dec 2, 2024

muttmuure commented on Dec 2, 2024

mananjadhav commented on Dec 2, 2024

ikevin127 commented on Dec 4, 2024

garrettmknight commented on Dec 10, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions