[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 contributors@expensify.com 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