[$250] Pressing down-key after searching a new user Crashes the Website - reported by @Tushu17

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open Website > Search
2. Write a Random Phone No.
3. Press Down-key

Expected Result:

It should highlight the shown result.

Actual Result:

It crashes the website.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.51-1
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2022-04-05.at.3.26.05.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @Tushu17
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1649153212387179

View all open jobs on GitHub

https://www.upwork.com/jobs/~01bb2be4f8a5df6802

[melvin-bot]

Triggered auto assignment to @Justicea83 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[sobitneupane]

Proposal:
Reason: We are pushing three section in getSections function in SearchPage which is later used in OptionsSelector. When we enter new user's name or phone number the first two sections has data empty []. So, we are getting the error.

App/src/pages/SearchPage.js

Lines 92 to 116 in 1b06874

	getSections() {
	const sections = [
	{
	data: this.state.recentReports,
	shouldShow: true,
	indexOffset: 0,
	},
	{
	data: this.state.personalDetails,
	shouldShow: true,
	indexOffset: this.state.recentReports.length,
	},
	];
	if (this.state.userToInvite) {
	sections.push(({
	undefined,
	data: [this.state.userToInvite],
	shouldShow: true,
	indexOffset: 0,
	}));
	}
	return sections;
	}

We need to replace above code with following lines of code:

getSections() {
    let sections = [];
    if (this.state.recentReports.length > 0) {
        sections.push(({
            data: this.state.recentReports,
            shouldShow: true,
            indexOffset: 0,
        }));
    }

    if (this.state.personalDetails.length > 0) {
        sections.push(({
            data: this.state.personalDetails,
            shouldShow: true,
            indexOffset: this.state.recentReports.length,
        }));
    }
    
    if (this.state.userToInvite) {
        sections.push(({
            undefined,
            data: [this.state.userToInvite],
            shouldShow: true,
            indexOffset: 0,
        }));
    }

    return sections;
}

[Justicea83]

great suggestion @sobitneupane , but the issue persists on Desktop as well so you can update the issue.

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

@Justicea83 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[melvin-bot]

@Justicea83 10 days overdue. Is anyone even seeing these? Hello?

[melvin-bot]

This issue has not been updated in over 14 days. @Justicea83 eroding to Weekly issue.