[$250] Chat - Selected members disappear from search result after returning from confirmation page

[lanitochka17]

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: 1.4.60-1
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to staging.new.expensify.com
2. Go to FAB > Start chat > Chat
3. Search for a term that will return two users
4. Click Add to group for these two users
5. Click Next without clearing the search field
6. Return to previous page

Expected Result:

The chat page will display the selected members because the search field is not cleared

Actual Result:

The chat page displays "No results found" instead of showing the selected members after returning from group confirmation page

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

Bug6437927_1712233915147.chat_search.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~013254e490a0ba9b6d
• Upwork Job ID: 1779812903951724544
• Last Price Increase: 2024-04-15
• Automatic offers:
• s77rt | Reviewer | 0
• tienifr | Contributor | 0

Issue Owner

Current Issue Owner: @muttmuure

[melvin-bot]

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

[lanitochka17]

@muttmuure 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 #vip-vsp

[Krishna2323]

Proposal

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

Selected members disappear from search result after returning from confirmation page

What is the root cause of that problem?

We don't pass includeSelectedOptions as true when using getFilteredOptions. Also we don't save keyForList which is essential to show the option as selected when searched.

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

We need to pass includeSelectedOptions as true and need to follow few steps to save the keyForList in Onyx.

App/src/pages/NewChatPage.tsx

Line 222 in 93e9719

true,

1. Modify the SelectedParticipant type
   

   App/src/types/onyx/NewGroupChatDraft.ts

   Lines 1 to 4 in 51af342

   	type SelectedParticipant = {
   	accountID: number;
   	login: string;
   	};

   
   To:

type SelectedParticipant = {
    accountID: number;
    login: string;
    keyForList?: string;
};

2. Add keyForList in selectedParticipants array objects.
   

   App/src/pages/NewChatPage.tsx

   Line 196 in 581b5d5

   const selectedParticipants: SelectedParticipant[] = selectedOptions.map((option: OptionData) => ({login: option.login ?? '', accountID: option.accountID ?? -1}));

        const selectedParticipants: SelectedParticipant[] = selectedOptions.map((option: OptionData) => ({
            login: option.login ?? '',
            accountID: option.accountID ?? -1,
            keyForList: option.keyForList ?? undefined,
        }));

3. Return the object with keyForList.
   

   App/src/pages/NewChatPage.tsx

   Line 67 in 581b5d5

   return {...baseOption, reportID: baseOption.reportID ?? ''};

{...baseOption, reportID: baseOption.reportID ?? '', keyForList: participant.keyForList};

Result

selected_participants_dissapear.mp4

Optionally

We can also modify getParticipantsOption to return keyForList if participant object have it.

[Krishna2323]

Proposal updated

• Added POC and optionals

[melvin-bot]

@muttmuure Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@muttmuure 6 days overdue. This is scarier than being forced to listen to Vogon poetry!

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~013254e490a0ba9b6d

[melvin-bot]

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

[muttmuure]

I think it makes sense to fix this since we're giving more focus to groups and search is an important part of that

[s77rt]

@Krishna2323 Thanks for the proposal. Searching for the email should also return the selected user (same as in the split flow)

Screen.Recording.2024-04-15.at.1.05.10.PM.mov

[Krishna2323]

Searching for the email should also return the selected user (same as in the split flow)

@s77rt, IG my solution already does that.

seleted_option_search_by_login.mp4

[s77rt]

@Krishna2323 Try search for a user that does not exist (type random email)

[abzokhattab]

Proposal

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

Selected members disappear from search results after returning from create group confirmation page

What is the root cause of that problem?

when going to the confirmation page, we dont set the option searchText field

App/src/pages/NewChatPage.tsx

Line 259 in ff368b8

const selectedParticipants: SelectedParticipant[] = selectedOptions.map((option: OptionData) => ({login: option.login ?? '', accountID: option.accountID ?? -1}));

the searchText of each option is needed to validate whether the current option should match the user input or not.

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

1. when setting the draft state we need to add the searchText here:

     const selectedParticipants: SelectedParticipant[] = selectedOptions.map((option: OptionData) => ({
                login: option.login ?? '',
                accountID: option.accountID ?? -1,
                searchText: option.searchText ?? '',
            }));

2. then in the OptionsListUtils.getParticipantsOption call we need to pass the searchText:

          const baseOption = OptionsListUtils.getParticipantsOption(
                {accountID: participant.accountID, login: participant.login, reportID: '', searchText: participant.searchText},
                personalDetails,
            );

alternatively

or instead of saving the searchText in the draft state, a better approach would be to correctly calculate the searchText inside the getParticipantsOption. to acheive that we can use the OptionsListUtils.getSearchText function as we do in the createOption call.

    const report = ReportUtils.getReport(participant.reportID);
    const searchText = getSearchText(report, displayName, [detail], false, false);

then in the return value we should fallback to the new searchText var:

        searchText: participant.searchText ?? searchText ?? undefined,

[s77rt]

@abzokhattab Thanks for the proposal. Your RCA makes sense. It seems we may face more issues like that (missing option fields). Do you think we can reconstruct all the missing fields without saving them to draft? or find a better way to save selected participants?

[tienifr]

Proposal

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

The chat page displays "No results found" instead of showing the selected members after returning from group confirmation page

What is the root cause of that problem?

When we save the group draft, we're only saving the login and accountID here.

But when we go back to the NewChatPage, we'll reconstruct the selectedOptions here.

This is buggy because our own re-constructed option might not match the option that we originally selected, in this case the re-constructed option is missing the searchText, it could miss other fields too, and it's not DRY.

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

We should not reconstruct the option, but should try to retrieve selected options again from the option list instead.

So here we already have the options list.

When we go back to NewChatPage, the selectedOptions that we'll need to get will surely be either in that options list, or in the existing selectedOptions state.

Now we can just find those selected options in that combined list, which matches the newGroupDraft?.participants, then we'll add necessary fields (reportID, isSelected) like we did here, and set it by setSelectedOptions.

This way, we're sure the options will always match and there's no duplicate logic, because:

• When we toggle the option to select it, we already use the option data from the options list
• When we go to next step, we save the keys (accountID, login) of that option
• When we go back, we find the selected options again from the options list itself, based on the keys

So they'll always match, and there's no re-construction needed.

What alternative solutions did you explore? (Optional)

NA

[s77rt]

@tienifr Thanks for the proposal. Your RCA is correct. I like the approach of the solution. Can you please test if this works on deep link? e.g. when you arrive to the confirmation page refresh the page then try go back, this way the options list is constructed after the selection list

PS: When selecting users on the initial page select users from different cases e.g. from recent and a new random user (type their email), etc.

[melvin-bot]

@s77rt @muttmuure this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[tienifr]

Can you please test if this works on deep link? e.g. when you arrive to the confirmation page refresh the page then try go back, this way the options list is constructed after the selection list

@s77rt Sure, it's working just fine, please see below

Screen.Recording.2024-04-19.at.4.43.20.PM.mov

[s77rt]

@tienifr Thanks for checking that. Let's get this fixed

🎀 👀 🎀 C+ reviewed
Link to proposal

[s77rt]

Not overdue. @neil-marcellini ^

[melvin-bot]

📣 @s77rt 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[s77rt]

Not overdue. @tienifr got assigned recently

[muttmuure]

PR still in progress

[neil-marcellini]

I never got a chance to review the proposal, so before I review the PR I will do that.

[neil-marcellini]

@tienifr Thanks for checking that. Let's get this fixed

🎀 👀 🎀 C+ reviewed Link to proposal

I agree it's a good proposal. I'll review the PR now.

[neil-marcellini]

I merged the PR ✅

[melvin-bot]

This issue has not been updated in over 15 days. @s77rt, @neil-marcellini, @muttmuure, @tienifr eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[s77rt]

PR made it to production 2 weeks ago

[tienifr]

@muttmuure Hi, could you help add Daily label to this GH and help with payments here? Also FYI I receive payment via NewDot now, I can request on NewDot once you update the payment summary.

Thanks

[muttmuure]

$250 for @tienifr for C+ (I accidentally paid this in Upwork, so if you're requesting in ND please could you refund your Upwork payment?)
$250 for @s77rt for C

[tienifr]

Refunded UW payment made in error. I 've requested payment in NewDot.

[JmillsExpensify]

$250 approved for @tienifr