[HOLD for payment 2024-12-05] [$250] Tags - State filed is not auto populated.

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.65-1
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

Pre-condition: upload dependent tags in old dot as admin

Dependent.-.Multi.Level.tags.NEW.1.csv

1. Go to https://staging.new.expensify.com/
2. Login as employee
3. Open employee workspace chat
4. Tap plus icon - create expense
5. Enter an amount and tap next

Expected Result:

State field must be auto populated.

Actual Result:

State filed is not auto populated.

Workaround:

Unknown

Platforms:

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

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6671538_1732170668160.Screenrecorder-2024-11-21-11-47-47-437.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021859625825867558770
• Upwork Job ID: 1859625825867558770
• Last Price Increase: 2024-11-21
• Automatic offers:
• mkzie2 | Contributor | 105029640

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (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.

[melvin-bot]

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

[melvin-bot]

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

[mkzie2]

Edited by proposal-police: This proposal was edited at 2024-11-22 15:59:14 UTC.

Proposal

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

State filed is not auto populated.

What is the root cause of that problem?

The transaction and transactionDraft are getting from useOnyx. The data can be not available at the first render in IOURequestStepConfirmation

App/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx

Lines 57 to 58 in e9e1857

	const [transaction] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION}${transactionID}`);
	const [transactionDraft] = useOnyx(`${ONYXKEYS.COLLECTION.TRANSACTION_DRAFT}${transactionID}`);

It leads transaction prop is undefined at the first time IOURequestStepConfirmation is rendered

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

Line 642 in e9e1857

transaction={transaction}

And this useEffect call setMoneyRequestTag with transactionID is -1 here

App/src/components/MoneyRequestConfirmationList.tsx

Lines 696 to 697 in e9e1857

	if (updatedTagsString !== TransactionUtils.getTag(transaction) && updatedTagsString) {
	IOU.setMoneyRequestTag(transactionID, updatedTagsString);

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

We have some options to resolve this bug

1. Introduce transactionID prop in MoneyRequestConfirmationList and pass transactionID={transactionID} from IOURequestStepConfirmation to MoneyRequestConfirmationList and remove this line. We used transactionID from route param in IOURequestStepConfirmation so I think it makes sense if we also use this in MoneyRequestConfirmationList

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

Line 642 in e9e1857

transaction={transaction}

2. In this HOC, return the loading screen if the onyx value is loading. Or we can pass isLoadingTransactionValue prop from withFullTransactionOrNotFound to the component. And we can pass this to MoneyRequestConfirmationList through IOURequestStepConfirmation

App/src/pages/iou/request/step/withFullTransactionOrNotFound.tsx

Line 47 in 3611198

export default function <TProps extends WithFullTransactionOrNotFoundProps<MoneyRequestRouteName>, TRef>(

Then we can return early in this useEffect if isLoadingTransactionValue is true and run this again after isLoadingTransactionValue is changed to false

App/src/components/MoneyRequestConfirmationList.tsx

Lines 696 to 697 in e9e1857

	if (updatedTagsString !== TransactionUtils.getTag(transaction) && updatedTagsString) {
	IOU.setMoneyRequestTag(transactionID, updatedTagsString);

We should do the same for the auto-populated category

What alternative solutions did you explore? (Optional)

We can add transactionID as a dependency here so this useEffect can be triggered again after the current transactionID is updated

App/src/components/MoneyRequestConfirmationList.tsx

Lines 696 to 697 in e9e1857

	if (updatedTagsString !== TransactionUtils.getTag(transaction) && updatedTagsString) {
	IOU.setMoneyRequestTag(transactionID, updatedTagsString);

[s77rt]

I'm not sure I see the bug here. Why must the state be auto populated? is this coming from a regression test? cc @garrettmknight

[mkzie2]

@s77rt If you reload the confirmation page, you can see it's auto-populated. It should be populated if the tag is required and the enabledTags has only one

[s77rt]

@mkzie2 Thanks for the proposal. Your RCA makes sense but for fixing this I think we should fix the useEffect dependencies as the easiest solution. There is already a comment that we shouldn't add transaction as it will cause the selection multiple times but we can add transactionID. Please test and let me know if that would work.

[mkzie2]

There is already a comment that we shouldn't add transaction as it will cause the selection multiple times but we can add transactionID

@s77rt I just tested this solution and it works well.

[mkzie2]

Updated this as alternative solution.

[s77rt]

@mkzie2 Thank you! Let's go with that.

🎀 👀 🎀 C+ reviewed
Link to proposal

[melvin-bot]

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

[melvin-bot]

📣 @mkzie2 🎉 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 📖

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• fix: tag is not auto filled #53059

If no regressions arise, payment will be issued on 2024-12-05. 🎊

For reference, here are some details about the assignees on this issue:

• @s77rt requires payment through NewDot Manual Requests
• @mkzie2 requires payment automatic offer (Contributor)

[melvin-bot]

@s77rt @garrettmknight @s77rt The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[s77rt]

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:

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:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [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: Fix reintroduced dependencies from conflict resolution #41152 (comment)

• [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

• [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.

  Bug requires regression test: No, I think this is coming from testrail already but couldn't find the exact steps, found C2778098 and C2990390

Regression Test Proposal Template

• [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

Precondition:

Test:

Do we agree 👍 or 👎

[garrettmknight]

Payment Summary:

• Contributor: @mkzie2 $250 paid via upwork
• Contributor+: @s77rt $250 via upwork

@s77rt go ahead and request when you're ready.

[JmillsExpensify]

$250 approved for @s77rt