[HOLD for payment 2024-07-24] [HOLD for payment 2024-07-10] [$250] Split - Selected user is not checked and does not appear on top of the list

[m-natarajan]

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: 9.0.2-0
Reproducible in staging?: y
Reproducible in production?: n
If this was caught during regression testing, add the test name, ID and link from TestRail: n/a
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:

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Split expense > Manual.
3. Enter amount > Next.
4. Search for any user.
5. Select the user.

Expected Result:

The user will be selected and appear on top of the list.

Actual Result:

The user is not selected and does not appear on top of the list.

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

Bug6524532_1719349594739.split.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @VictoriaExpensify

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0179dafa48eac22e87
• Upwork Job ID: 1806059889541697457
• Last Price Increase: 2024-06-26
• Automatic offers:
• suneox | Reviewer | 102891650
• bernhardoj | Contributor | 102891652

[melvin-bot]

Triggered auto assignment to @VictoriaExpensify (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]

Triggered auto assignment to @hayata-suenaga (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[m-natarajan]

@hayata-suenaga 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

[m-natarajan]

We think that this bug might be related to #vip-vsb

[VictoriaExpensify]

I think this is in your hands @hayata-suenaga , but let me know if you need anything from me

[bernhardoj]

Proposal

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

Selecting user doesn't work when there is a search keyword.

What is the root cause of that problem?

When we select an option, we clear the search input and also call the debounced select row function.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 303 to 312 in 4d7c5e9

	if (shouldShowTextInput) {
	clearInputAfterSelect();
	}
	}
	if (shouldDebounceRowSelect) {
	debouncedOnSelectRow(item);
	} else {
	onSelectRow(item);
	}

Clearing the search input re-renders the list and causes the debounced function to recreate each render,

App/src/components/SelectionList/BaseSelectionList.tsx

Line 281 in 4d7c5e9

const debouncedOnSelectRow = useCallback(lodashDebounce(onSelectRow, 200), [onSelectRow]);

because the onSelectRow is an inline function.

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 391 in 4d7c5e9

onSelectRow={(item) => (isIOUSplit ? addParticipantToSelection(item) : addSingleParticipant(item))}

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

We need to wrap the onSelectRow with a useCallback so it is only re-created when needed,

const onSelectRow = useCallback((item) => {
    if (isIOUSplit) {
        addParticipantToSelection(item);
        return;
    }
    addSingleParticipant(item);
}, [isIOUSplit, addParticipantToSelection, addSingleParticipant]);

but this doesn't solve the problem yet because addParticipantToSelection function still keeps re-created on each render because it depends on participants prop. The prop has a default value of an empty array.

App/src/pages/iou/request/MoneyRequestParticipantsSelector.tsx

Line 50 in 4d7c5e9

function MoneyRequestParticipantsSelector({participants = [], onFinish, onParticipantsAdded, iouType, iouRequestType, action}: MoneyRequestParticipantsSelectorProps) {

When there is no participant selected yet, the default value will be used, and in this case, the array is a new array instance on every render, thus the addParticipantToSelection keeps being re-created on each render. To solve it, we need to replace the inline empty array with CONST.EMPTY_ARRAY.

[yuwenmemon]

@bernhardoj Seems like this was caused by #44360 then?

[yuwenmemon]

@bernhardoj's proposal works. Going to implement it.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0179dafa48eac22e87

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.3-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix selection for splits when there is a search term present #44505

If no regressions arise, payment will be issued on 2024-07-10. 🎊

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allroundexperts] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allroundexperts] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allroundexperts] Determine if we should create a regression test for this bug.
• [@allroundexperts] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@VictoriaExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

@yuwenmemon, @allroundexperts, @bernhardoj, @VictoriaExpensify Eep! 4 days overdue now. Issues have feelings too...

[VictoriaExpensify]

@allroundexperts waiting for you to complete your part of the checklist so I can complete mine

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.7-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix selection for splits when there is a search term present #44505

If no regressions arise, payment will be issued on 2024-07-24. 🎊

For reference, here are some details about the assignees on this issue:

• @allroundexperts requires payment through NewDot Manual Requests
• @bernhardoj requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@allroundexperts] The PR that introduced the bug has been identified. Link to the PR:
• [@allroundexperts] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@allroundexperts] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@allroundexperts] Determine if we should create a regression test for this bug.
• [@allroundexperts] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@VictoriaExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[bernhardoj]

I requested in ND (the payment should be due on 10th July).

[JmillsExpensify]

Waiting for payment summary.

[VictoriaExpensify]

Hey @allroundexperts - can you please complete your checklist so I can organise payment? Thank you!

[VictoriaExpensify]

Contributor: @bernhardoj owed $250 via NewDot

Waiting for Contributor+ to complete checklist before we complete their payment

[JmillsExpensify]

$250 approved for @bernhardoj

[allroundexperts]

Checklist

1. Updated SelectionList onSelectRow debounce to trailing edge if shouldDebounceRowSelect = true #44360
2. https://github.com/Expensify/App/pull/44360/files#r1694340991
3. N/A
4. A checklist would be helpful here.

Regression test

1. Login to any account
2. Go to FAB -> Split expense -> Manual -> Enter amount -> Next
3. Search for any user and select the user

Verify that the user will be selected and appears on top of the list.

Do we 👍 or 👎

[VictoriaExpensify]

Thanks for the checklist @allroundexperts !

TestRail GH created - https://github.com/Expensify/Expensify/issues/418080

[VictoriaExpensify]

Payment summary:
Contributor+: @allroundexperts owed $250 via NewDot

[JmillsExpensify]

$250 approved for @allroundexperts