[$250] Workspace - Single category and tag isn't auto selected when requesting money

[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.63.0
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:
Slack conversation:

Issue found when executing PR #40217

Action Performed:

1. Log in with a new Gmail account
2. Create a workspace
3. Edit categories and tags so you only have one of each
4. Make tags and categories required
5. Navigate to FAB - Submit expense - Manual
6. Select the workspace chat
7. Tap on the "Show more" button

Expected Result:

Category and tag fields should auto select the single entry

Actual Result:

Single category and tag isn't auto selected when requesting money

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

Bug6454173_1713468126792.OHYC4360.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01342dc85ef896c8e8
• Upwork Job ID: 1782368096132030464
• Last Price Increase: 2024-04-22
• Automatic offers:
• ahmedGaber93 | Reviewer | 0
• dukenv0307 | Contributor | 0
• GandalfGwaihir | Contributor | 0

[melvin-bot]

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

[lanitochka17]

@zanyrenney FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #wave-collect - Release 1

[Krishna2323]

Proposal

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

Workspace - Single category and tag isn't auto selected when requesting money

What is the root cause of that problem?

Currently we only autoselect tag/category when there is only one and it is required.

App/src/components/MoneyRequestConfirmationList.tsx

Lines 486 to 510 in 8699315

	// Auto select the category if there is only one enabled category and it is required
	useEffect(() => {
	const enabledCategories = Object.values(policyCategories ?? {}).filter((category) => category.enabled);
	if (iouCategory || !shouldShowCategories || enabledCategories.length !== 1 || !isCategoryRequired) {
	return;
	}
	IOU.setMoneyRequestCategory(transactionID, enabledCategories[0].name);
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [shouldShowCategories, policyCategories, isCategoryRequired]);
	// Auto select the tag if there is only one enabled tag and it is required
	useEffect(() => {
	let updatedTagsString = TransactionUtils.getTag(transaction);
	policyTagLists.forEach((tagList, index) => {
	const enabledTags = Object.values(tagList.tags).filter((tag) => tag.enabled);
	const isTagListRequired = tagList.required === undefined ? false : tagList.required && canUseViolations;
	if (!isTagListRequired || enabledTags.length !== 1 || TransactionUtils.getTag(transaction, index)) {
	return;
	}
	updatedTagsString = IOUUtils.insertTagIntoTransactionTagsString(updatedTagsString, enabledTags[0] ? enabledTags[0].name : '', index);
	});
	if (updatedTagsString !== TransactionUtils.getTag(transaction) && updatedTagsString) {
	IOU.setMoneyRequestTag(transactionID, updatedTagsString);
	}
	}, [policyTagLists, transaction, transactionID, policyTags, canUseViolations]);

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

If we want to select the category even if it is not required then we need to remove the isCategoryRequired & isTagListRequired checks.

We can also make category/tag to show not as supplementary when we auto select. For that we need to update the conditions below.

App/src/components/MoneyRequestConfirmationList.tsx

Line 860 in 1e510b5

isSupplementary: action === CONST.IOU.ACTION.CATEGORIZE ? false : !isCategoryRequired,

App/src/components/MoneyRequestConfirmationList.tsx

Line 884 in 1e510b5

isSupplementary: !isTagRequired,

isSupplementary: action === CONST.IOU.ACTION.CATEGORIZE ? false : !isCategoryRequired && enabledCategories.length !== 1,
isSupplementary: !isTagRequired && enabledTags.length !== 1,

What alternative solutions did you explore? (Optional)

Result

category_tag_autoselect.mp4

[allgandalf]

Proposal

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

Single category and tags aren't auto selected when requesting money.

What is the root cause of that problem?

Here when we have only one tag / one category we have a check which sets the auto selected value, but here before that we have certain conditions as below:
For Category:

App/src/components/MoneyRequestConfirmationList.tsx

Lines 489 to 491 in 8699315

	if (iouCategory || !shouldShowCategories || enabledCategories.length !== 1 || !isCategoryRequired) {
	return;
	}

For Tag:

App/src/components/MoneyRequestConfirmationList.tsx

Lines 501 to 504 in 8699315

	const isTagListRequired = tagList.required === undefined ? false : tagList.required && canUseViolations;
	if (!isTagListRequired || enabledTags.length !== 1 || TransactionUtils.getTag(transaction, index)) {
	return;
	}

When I debugged this I found out that !isCategoryRequired and isTagListRequired are always set to true, regardless of whatever we have set on the BE (In workspace category and tags page, when we set the values as required those values are successfully changed on the BE), so no issue on the BE.

Now coming to why values isCategoryRequired and isTagListRequired are always false regardless of the backend value, that is because we had added an extra check during the feature addition of categories and tags to only set those values to true if the user has beta access by checking the canUseViolations value, we check isCategoryRequired as well as isTagListRequired with canUseViolations and their respective BE values:

App/src/components/MoneyRequestConfirmationList.tsx

Line 296 in 8699315

const isCategoryRequired = canUseViolations && !!policy?.requiresCategory;

App/src/components/MoneyRequestConfirmationList.tsx

Line 501 in 8699315

const isTagListRequired = tagList.required === undefined ? false : tagList.required && canUseViolations;

This causes the values to be always set to false.

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

We should remove the && canUseViolations from both isTagListRequired as well as isCategoryRequired

Result Video

Screen.Recording.2024-04-20.at.5.47.20.AM.mov

Now that I searched more, I think we should get rid of the canUseViolations hook altogether, because this also gives us regression, it doesn't make tags required (Even when we have required value on the BE):

App/src/components/MoneyRequestConfirmationList.tsx

Line 797 in 8699315

const isTagRequired = required === undefined ? false : canUseViolations && required;

So I guess we should remove the use of hook from the page as the categories and tags for collect policy are no longer in beta

[Tony-MK]

Proposal

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

Workspace - Single category and tag isn't auto selected when requesting money

What is the root cause of that problem?

This is a regression caused by #40217 and was suggested in #38744 (comment).

iouCategory and transactionID should be included in the category dependencies required because the iouCategory will change after the first render.

App/src/components/MoneyRequestConfirmationList.tsx

Lines 515 to 523 in 1e510b5

	// Auto select the category if there is only one enabled category and it is required
	useEffect(() => {
	const enabledCategories = Object.values(policyCategories ?? {}).filter((category) => category.enabled);
	if (iouCategory || !shouldShowCategories || enabledCategories.length !== 1 || !isCategoryRequired) {
	return;
	}
	IOU.setMoneyRequestCategory(transactionID, enabledCategories[0].name);
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [shouldShowCategories, policyCategories, isCategoryRequired]);

The tag field does not have this issue because the dependencies are set properly.

App/src/components/MoneyRequestConfirmationList.tsx

Lines 537 to 539 in 1e510b5

	IOU.setMoneyRequestTag(transactionID, updatedTagsString);
	}
	}, [policyTagLists, transaction, transactionID, policyTags, canUseViolations]);

This is why I only experienced this with the category field.

I believe the category dependencies should not have the eslint rule line like the tag dependencies`.

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

First, add iouCategory and transactionID as apart dependencies.
Hence, it should look like the code example below.

}, [iouCategory, transactionID, shouldShowCategories, policyCategories, isCategoryRequired]);

Finally, remove the eslint rule line below because there will be no dependency issues.

App/src/components/MoneyRequestConfirmationList.tsx

Line 522 in 1e510b5

// eslint-disable-next-line react-hooks/exhaustive-deps

What alternative solutions did you explore? (Optional)

Since iouCategory is defaulted to an empty string, we can initialize it to the only categories in the MoneyRequestConfirmationListProps if the enabledCategories is equal to one and categories are required.

Note

I noticed you can empty the tag and category for a brief moment before the backend reverts them.

Hence, I recommend we prohibit the ability to change the tag or category in this situation on the edit pages in the PR.

POC.-.Chrome.mov

[Krishna2323]

Proposal Updated

• Added optional to not show category/tag as supplementary when we autoselect.

[Krishna2323]

@Tony-MK, I don't think that it is a regression from my PR, can you pls explain why do you think that it is regression?

[Tony-MK]

Hey @krishna232, the useEffect needs the iouCategory dependency like the useEffect for the tags hook.

[zanyrenney]

adding external label