[$125] Web - Inconsistent behavior of tag disappearing and reappearing when requesting money

[kbecciv]

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.55-0
Reproducible in staging?: y
Reproducible in production?: y
Issue reported by: Applause - Internal team

Action Performed:

Preconditions:
In OldDot under admin, create a Collect group policy, enable tags and add the tag "Child: Tom", and it should be the only tag in the policy. Add the employee to the policy. Setup OldDot Collect Policy:
https://sites.google.com/applausemail.com/applause-expensifyproject/wiki-guides/newdot-categories?authuser=0

1. Open the WS chat report
2. Click on the plus icon inside the compose box > Request money > Enter an amount > Click on the tag
3. Select the tag "Child: Tom" (Note that it is already selected by default)
4. Observe the behavior of the "Tag" field after you selected the tag and went back
5. Click on FAB > Request money > Enter an amount > Select the collect policy created in OD
6. Click on the Tag field (note that the "Child: Tom" tag is already selected)
7. Click on the "Child: Tom" tag again
8. Observe the behavior of the tag field and compare it with the behavior seen on step 4

Expected Result:

The behavior seen on step 4 should be the same for step 8 as well

Actual Result:

The tag field first becomes empty and there is a noticeable delay before the selected tag "Child: Tom" shows up again. This behavior is different from the one seen on step 4, where there is no noticeable delay.

Workaround:

n/a

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

Bug6421398_1711004073820.bandicam_2024-03-21_09-47-07-173.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~010aab18242acca3aa
• Upwork Job ID: 1770985774762127360
• Last Price Increase: 2024-04-08
• Automatic offers:
• Krishna2323 | Contributor | 0

[melvin-bot]

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

[kbecciv]

@joekaufmanexpensify 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.

[kbecciv]

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.

Web - Tag - Inconsistent behavior of tag disappearing and reappearing

What is the root cause of that problem?

The useEffect below is autoselecting the tag even when user deselects it.

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 507 to 521 in 9c8ac29

	// 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 = _.filter(tagList.tags, (tag) => tag.enabled);
	const isTagListRequired = isUndefined(tagList.required) ? 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(transaction.transactionID, updatedTagsString);
	}
	}, [policyTagLists, transaction, policyTags, isTagRequired, canUseViolations]);

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

The useEffect should run only once. For that we can create a ref to track. We also need to do the same with other fields like category. We will create a ref isAutoSelectedTag/isAutoSelectedCategory and set it to true when we automatically select a tag and in useEffect we will check if sAutoSelectedTag/isAutoSelectedCategory.current is true or not and if true we will return without autoselecting the tag.

Result

auto_selected_tag.mp4

Alternatively

We can just remove the dependencies array of the useEffect. This will make sure that we autoselect the option only once (when the component mounts).

[Krishna2323]

Proposal Updated

[Krishna2323]

Proposal Updated

[nkdengineer]

Proposal

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

The tag field first becomes empty and there is a noticeable delay before the selected tag "Child: Tom" shows up again. This behavior is different from the one seen on step 4, where there is no noticeable delay.

What is the root cause of that problem?

We have a useEffect here that auto select the tag if the tag required and there's only one tag to select.

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Lines 506 to 515 in 8970d08

	// 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 = _.filter(tagList.tags, (tag) => tag.enabled);
	const isTagListRequired = isUndefined(tagList.required) ? false : tagList.required && canUseViolations;
	if (!isTagListRequired || enabledTags.length !== 1 || TransactionUtils.getTag(transaction, index)) {
	return;
	}

But In IOURequestStepTag we have the logic to de-select the tag if we select the selected tag. So after going back to confirm page the tag will disappear and then reappear immediately

This bug is the same for category

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

Since we auto select the tag if it's required and there's only one tag to select, we should disable user go to IOURequestStepTag page in this case. That makes more seen because we can't edit this field, it's the same behavior the amount field in distance request flow. To do that we can create variable like isAutoSelectTag that will be true if the tag if it's required and there's only one tag to select

const [updatedTagsString, isAutoSelectTags] = useMemo(() => {
        let updatedTagsString = TransactionUtils.getTag(transaction);
        let isAutoSelectTags = {};
        policyTagLists.forEach((tagList, index) => {
            const enabledTags = _.filter(tagList.tags, (tag) => tag.enabled);
            const isTagListRequired = isUndefined(tagList.required) ? false : tagList.required && canUseViolations;
            if (!isTagListRequired || enabledTags.length !== 1 || TransactionUtils.getTag(transaction, index)) {
                isAutoSelectTags[tagList.name] = isTagListRequired && enabledTags.length === 1;
                return;
            }
            
            isAutoSelectTags[tagList.name] = true;
            updatedTagsString = IOUUtils.insertTagIntoTransactionTagsString(updatedTagsString, enabledTags[0] ? enabledTags[0].name : '', index);
        });
        return [updatedTagsString, isAutoSelectTags];
    }, [policyTagLists, transaction, policyTags, isTagRequired, canUseViolations]);

useEffect(() => {
    if (!isTagRequired) {
        return ;
    }
    if (updatedTagsString !== TransactionUtils.getTag(transaction) && updatedTagsString) {
        IOU.setMoneyRequestTag(transaction.transactionID, updatedTagsString);
    }
}, [isTagRequired, updatedTagsString]);

Update the condition to show the right icon here to !isReadOnly && !isAutoSelectTags

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 815 in 8970d08

shouldShowRightIcon={!isReadOnly}

And update the onPress to do nothing if we auto select the tag

App/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js

Line 819 in 8970d08

onPress={() =>

onPress={() => {
    if (isAutoSelectTags[name]) {
        return;
    }
    Navigation.navigate(
        ROUTES.MONEY_REQUEST_STEP_TAG.getRoute(CONST.IOU.ACTION.CREATE, iouType, index, transaction.transactionID, reportID, Navigation.getActiveRouteWithoutParams()),
    )
}}

Do the same way for category

What alternative solutions did you explore? (Optional)

NA