[HOLD for payment 2023-09-25] [$500] Web - When manually entering a timezone, "No results found" is not shown when there are no search results

[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!

---

Action Performed:

1. Click on settings > Profile > Timezone
2. Turn off Automatically determine your location
3. Input the number on search, Observed no results found but not showing "No results found"

Expected Result:

Show "No results found"

Actual Result:

Not displayed "No results found"

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.62.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
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-28.at.22.22.43.mov

Recording.4196.mp4

Expensify/Expensify Issue URL:
Issue reported by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693236150330049

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~018b22f58c3d2060c6
• Upwork Job ID: 1698491149454860288
• Last Price Increase: 2023-09-04
• Automatic offers:
• namhihi237 | Contributor | 26489739
• namhihi237 | Reporter | 26489742

[melvin-bot]

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

[kbecciv]

Proposal by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1693236150330049

Proposal

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

Show "No results found" when no search result

What is the root cause of that problem?

We are using SelectionList here to show the list timezone. But we don't have the logic to display "No results found" through the headerMessage prop when there are no search results.

App/src/pages/settings/Profile/TimezoneSelectPage.js

Lines 74 to 83 in 08c2f5d

	<SelectionList
	textInputLabel={translate('timezonePage.timezone')}
	textInputValue={timezoneInputText}
	onChangeText={filterShownTimezones}
	onSelectRow={saveSelectedTimezone}
	sections={[{data: timezoneOptions, indexOffset: 0, isDisabled: timezone.automatic}]}
	initiallyFocusedOptionKey={_.get(_.filter(timezoneOptions, (tz) => tz.text === timezone.selected)[0], 'keyForList')}
	shouldDelayFocus
	showScrollIndicator
	/>

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

We should add headerMessage prop for SelectionList

headerMessage={timezoneInputText.trim() && !timezoneOptions.length ? translate('common.noResultsFound') : ''}

What alternative solutions did you explore? (Optional)

N/A

[jliexpensify]

@kbecciv and @namhihi237 I don't think this is a bug: it's working as intended, as you've disabled the location and are typing a series of numbers. Sure, it would be nice to surface an error, but at the same time, users shouldn't expect anything to pop up if they're typing numbers in a field that uses letters. I don't see this as a true, valid bug.

[namhihi237]

Hi @jliexpensify Don't just enter numbers, if you enter letters without results, it still won't display "no results found". I see in the app we currently have several search places. At the same, "no results found" is displayed everywhere if the user searches without seeing results.

[jliexpensify]

Got it, thanks for letting me know - here is what we use for another field:

For consistency's sake, I'd then consider the lack of "No Results Found" to be an issue. I can also reproduce on Android (Pixel 3a) and Chrome.

[namhihi237]

thanks @jliexpensify.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~018b22f58c3d2060c6

[melvin-bot]

Current assignee @jliexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[zukilover]

Proposal

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

Show "No results found" when no search result

What is the root cause of that problem?

BaseSelectionList component does not currently handle empty list. It will only show loading indicator when it has no list and is loading:

App/src/components/SelectionList/BaseSelectionList.js

Lines 337 to 339 in 4676492

	{flattenedSections.allOptions.length === 0 && showLoadingPlaceholder ? (
	<OptionsListSkeletonView shouldAnimate />
	) : (

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

Instead of manually adding headerMessage on its implementations, I propose that we handle empty list with translate('common.noResultsFound') directly from the BaseSelectionList component. We will add another ternary condition where: it will show the no result indicator when the it is not loading the content.

This is more efficient and is addressing common case where the list does not have content to show.

{flattenedSections.allOptions.length === 0
? showLoadingPlaceholder 
    ? <OptionsListSkeletonView shouldAnimate />
    : (
       <View style={[styles.ph5, styles.pb5]}>
              <Text style={[styles.textLabel, styles.colorMuted]}>{translate('common.noResultsFound')}</Text>
       </View>
)                 

We can further refactor the code above so that the header message element can be reused.

What alternative solutions did you explore? (Optional)

N/A

[mubin-khalid]

I was looking through this problem. This closely resembles to one I found on SO. The problem is: You can't use SectionList's ListEmptyComponent to achieve this as you do with the FlatList component. ListEmptyComponentis only triggered when the data prop is empty. If however you have any section in the data prop, then ListEmptyComponent won't be triggered. This link surely will be useful

[melvin-bot]

📣 @mubin-khalid! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[narefyev91]

Proposal from @namhihi237 looks good to me #26573 (comment)
We already have a prop - which is rendering under the input, and we should use it to add 'No results'. Refactoring globally section list may cause potential regression issues.
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @danieldoglas, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @namhihi237 🎉 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 📖

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

Based on my calculations, the pull request did not get merged within 3 working days of assignment. Please, check out my computations here:

• when @namhihi237 got assigned: 2023-09-04 13:51:25 Z
• when the PR got merged: 2023-09-13 09:01:26 UTC
• days elapsed: 6

On to the next one 🚀

[jliexpensify]

Payment summary:

• Bug Reporter / Contributor: @namhihi237 $50 + $500
• C+: @narefyev91 : $500 (Invoiced payment)

Upwork job

[jliexpensify]

Bump for @narefyev91 to complete the checklist please!

[narefyev91]

• The PR that introduced the bug has been identified. Link to the PR - it was missing functionality which was not coming from any regression work
• 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 - N/A
• 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 - N/A
• Determine if we should create a regression test for this bug. - N/A

[jliexpensify]

Paid and job closed!