[$500] iOS - Request Money - Searching for specific HT account while using HT account has an odd behavior

[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.3.95.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: Applause - Internal Team
Slack conversation:

Issue found when executing PR #30591

Action Performed:

Pre-requisite: user must be logged in with a HT account.

1. Tap on "+" button.
2. Tap on "Request money".
3. Select "Manual".
4. Enter any amount and tap on "Next".
5. Search for a specific HT account, such as "applausetester+vd_htmain@applause.expensifail.com".

Expected Result:

The search results should only show the requested account.

Actual Result:

The account being searched is at the top of the list, but then reappears at the bottom constantly changing avatars.

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

Bug6261440_1698958778867.Upyl2566_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01c1e5f3f5dad45859
• Upwork Job ID: 1720190449397870592
• Last Price Increase: 2023-11-02

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[orshikh-dev]

Proposal

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

The account being searched is at the top of the list, but then reappears at the bottom constantly changing avatars.

What is the root cause of that problem?

It shows an existing account with a specific existing email and it also adds a non-existed account with non-existed email.

When we are searching with some text, search input sends a search term for every single character. In every request, it will call this method, this method returns all list options:

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 111 to 160 in a61572e

	const sections = useMemo(() => {
	const newSections = [];
	let indexOffset = 0;
	const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(
	searchTerm,
	participants,
	newChatOptions.recentReports,
	newChatOptions.personalDetails,
	personalDetails,
	true,
	indexOffset,
	);
	newSections.push(formatResults.section);
	indexOffset = formatResults.newIndexOffset;
	if (maxParticipantsReached) {
	return newSections;
	}
	newSections.push({
	title: translate('common.recents'),
	data: newChatOptions.recentReports,
	shouldShow: !_.isEmpty(newChatOptions.recentReports),
	indexOffset,
	});
	indexOffset += newChatOptions.recentReports.length;
	newSections.push({
	title: translate('common.contacts'),
	data: newChatOptions.personalDetails,
	shouldShow: !_.isEmpty(newChatOptions.personalDetails),
	indexOffset,
	});
	indexOffset += newChatOptions.personalDetails.length;
	if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
	newSections.push({
	undefined,
	data: _.map([newChatOptions.userToInvite], (participant) => {
	const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
	return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
	}),
	shouldShow: true,
	indexOffset,
	});
	}
	return newSections;
	}, [maxParticipantsReached, newChatOptions, participants, personalDetails, translate, searchTerm]);

If we find a user with a specific email, that user will be added to sections

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 115 to 124 in a61572e

	const formatResults = OptionsListUtils.formatSectionsFromSearchTerm(
	searchTerm,
	participants,
	newChatOptions.recentReports,
	newChatOptions.personalDetails,
	personalDetails,
	true,
	indexOffset,
	);
	newSections.push(formatResults.section);

And if a user does not exist, we add non-existing users into sections as well,

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 147 to 159 in a61572e

	if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
	newSections.push({
	undefined,
	data: _.map([newChatOptions.userToInvite], (participant) => {
	const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
	return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
	}),
	shouldShow: true,
	indexOffset,
	});
	}
	return newSections;

There are 2 possible cases:
CASE 1: THE USER DOES NOT EXIST
Non-existing user is added into sections, no issues:

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Lines 147 to 159 in a61572e

	if (newChatOptions.userToInvite && !OptionsListUtils.isCurrentUser(newChatOptions.userToInvite)) {
	newSections.push({
	undefined,
	data: _.map([newChatOptions.userToInvite], (participant) => {
	const isPolicyExpenseChat = lodashGet(participant, 'isPolicyExpenseChat', false);
	return isPolicyExpenseChat ? OptionsListUtils.getPolicyExpenseReportOption(participant) : OptionsListUtils.getParticipantsOption(participant, personalDetails);
	}),
	shouldShow: true,
	indexOffset,
	});
	}
	return newSections;

CASE 2: USER EXIST
In this case, the user will be added to the section, just like this:

App/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js

Line 124 in a61572e

newSections.push(formatResults.section);

But, in every single valid email address, it will be a non-existent user:
For example applausetester+vd_htmain@applause.expensifail.com

Existed user:
If the email address is valid, it will be added into sections:
applausetester+vd_htmain@applause.e is enough, not required to be whole email, just valid, existed email pattern is enough

Non-existed users with valid emails:
applausetester+vd_htmain@applause.e <= here we know this email is valid and found existed user with this email
applausetester+vd_htmain@applause.ex
applausetester+vd_htmain@applause.exp
applausetester+vd_htmain@applause.expe
applausetester+vd_htmain@applause.expen
. . .
applausetester+vd_htmain@applause.expensifail.co <= till, not whole email address

That's why the avatar is changing because, for every valid email, for every single character, it will send a request, in every request, the non-exist user(all different user) will be added into sections, in this example, for all characters in this text [xpensifail.co]. The email was so long, so we didn't see it was changing in the row.

Please see from this video:
https://drive.google.com/file/d/1LOnmzTz-fSW9oCk-p55pkh0PlKRmRBv0/view?usp=sharing

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

1. We need to improve UX. We can make some changes to the email address, maybe we can concat from the middle, or concat from the head, now it is concating from the tail.

Concating from head:

Concating from middle:

2. We can make other UX design changes, user can easily understand what is going on.

What alternative solutions did you explore? (Optional)

Or we can set a limit on email length, so it can't be that long to be out of the screen. In example, 42 character length email:

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[rojiphil]

Proposal

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

In request money participants selector page, the search results keeps getting constantly updated (i.e avatar, search result itself) even after the user has stopped entering the search value. This is the problem we are trying to solve here.

What is the root cause of that problem?

When a long search text is entered (e.g. applausetester+vd_htmain@applause.expensifail.com), this will generate many API requests to the server for reports as shown here. Since each of these responses will come back at some time later and trigger the useEffect here, updation of the sections here will get delayed in a HT environment with lots of results.

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

We can solve this problem by debouncing the updation of chat options thereby saving processing time which will matter a lot in a HT environment.

1. We can move the contents of useEffect here into a new function updateChatOptions like this

    const updateChatOptions = useCallback(() => {
       // Contents of useEffect here  
    }, [betas, reports, participants, personalDetails, translate, searchTerm, setNewChatOptions, iouType, isDistanceRequest]);

2. Debouncing the updateChatOptions can be done like this here

    useEffect(() => {
        const debouncedFetchChatOptions = _.debounce(updateChatOptions, 200);
        debouncedFetchChatOptions();
        return () => {
            debouncedFetchChatOptions.cancel();
        };
    }, [updateChatOptions]);

What alternative solutions did you explore? (Optional)

[melvin-bot]

@puneetlath, @mananjadhav Whoops! This issue is 2 days overdue. Let's get this updated quick!