Expense - On selecting a category/ tags by multiple tapping, user directed to conversation page

[IuliiaHerets]

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

Action Performed:

1. Go to https://staging.new.expensify.com/home
2. Go to workspace settings
3. Enable tags
4. Create few tags
5. Tap workspace chat
6. Create an expense with category and tag
7. Open the expense
8. Open category and select a category by multiple tapping
9. Open tag and select a tag by multiple tapping

Expected Result:

On selecting a category/ tags by multiple tapping, user must not be directed to conversation/merchant page instead of expense details page.

Actual Result:

On selecting a category/ tags by multiple tapping, user directed to conversation/merchant page instead of expense details page.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6680799_1732988031088.Screenrecorder-2024-11-30-22-56-36-735_compress_1.mp4

View all open jobs on GitHub

[melvin-bot]

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

[Krishna2323]

Edited by proposal-police: This proposal was edited at 2024-11-30 21:59:49 UTC.

Proposal


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

Expense - On selecting a category/ tags by multiple tapping, user directed to conversation page

What is the root cause of that problem?

• The tag/category option can be clicked/pressed twice until the page is completely removed and when we press twice, the updateTag function is called twice and navigates back twice.
  

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

  Lines 74 to 94 in 3cc88f5

  	const navigateBack = () => {
  	Navigation.goBack(backTo);
  	};
  	const updateTag = (selectedTag: Partial<ReportUtils.OptionData>) => {
  	const isSelectedTag = selectedTag.searchText === tag;
  	const searchText = selectedTag.searchText ?? '';
  	const updatedTag = IOUUtils.insertTagIntoTransactionTagsString(transactionTag, isSelectedTag ? '' : searchText, tagListIndex);
  	if (isEditingSplitBill) {
  	IOU.setDraftSplitTransaction(transactionID, {tag: updatedTag});
  	navigateBack();
  	return;
  	}
  	if (isEditing) {
  	IOU.updateMoneyRequestTag(transactionID, report?.reportID ?? '-1', updatedTag, policy, policyTags, policyCategories);
  	navigateBack();
  	return;
  	}
  	IOU.setMoneyRequestTag(transactionID, updatedTag);
  	navigateBack();
  	};

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


• We should return early from updateTag or similar functions on other selection list page if the isFocused state from @react-navigation/native is false.
• If we want we can apply this logic directly in SelectionList & SelectionListWithModal

What alternative solutions did you explore? (Optional)

• We can apply this logic in ScreenWrapper and few other selector modals by using pointerEvents prop. This way, press events won't be triggered when screen is not focused.
• We can also add a prop in ScreenWrapper to apply this logic conditionally.

            <View
                ref={ref}
                style={[styles.flex1, {minHeight}]}
                // eslint-disable-next-line react/jsx-props-no-spreading, react-compiler/react-compiler
                {...panResponder.panHandlers}
                testID={testID}
                pointerEvents={isFocused ? 'auto' : 'none'}
            >

App/src/components/ScreenWrapper.tsx

Lines 262 to 268 in 3cc88f5

	<View
	ref={ref}
	style={[styles.flex1, {minHeight}]}
	// eslint-disable-next-line react/jsx-props-no-spreading, react-compiler/react-compiler
	{...panResponder.panHandlers}
	testID={testID}
	>

Result