[HOLD for payment 2023-09-11] [$1000] Show all selection options when clearing a search input selection field

[kavimuru]

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

---

https://expensify.slack.com/archives/C049HHMV9SM/p1692369698847549?thread_ts=1691489722.039289&cid=C049HHMV9SM

We have determined that all push to page inputs (except pronouns page) will follow the pattern used by the date picker:

This means that we will

• display all options
• search to filter options

This affects the following selections (may not be a complete list):

• Country Selection
  • Click on settings > Profile > Personal details > Home address > Country > Clear the country
• US State Selection
  • Click on settings > Profile > Personal details > Home address > State (must have US selected as Country)

Action Performed:

1. Open website
2. Click on settings > Profile > Personal details > Home address > Country > Clear the country that is here and you see that countries are not shown even clearing search country field

Expected Result:

Countries should be shown when clearing search country field

Actual Result:

Countries are not shown when clearing search country field

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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.55-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:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

screen-capture.-.2023-08-07T151534.742.webm

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f8624994d9a4175e
• Upwork Job ID: 1692558937839087616
• Last Price Increase: 2023-08-25
• Automatic offers:
• namhihi237 | Contributor | 26364865
• mahmudjontoraqulov | Reporter | 26364868

[namhihi237]

Proposal

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

Countries should be shown when clearing the search country field

What is the root cause of that problem?

We're using the results of the search here

App/src/components/CountryPicker/CountrySelectorModal.js

Line 81 in 63d87ba

sections={[{data: searchResults, indexOffset: 0}]}

Search results are counted here

App/src/components/CountryPicker/CountrySelectorModal.js

Line 55 in 63d87ba

const searchResults = searchCountryOptions(searchValue, countries);

In the searchCountryOptions function we are returning the empty array when the search input is empty. That means that when we have not entered the input box, there will be no results

App/src/libs/searchCountryOptions.js

Lines 10 to 14 in 63d87ba

	function searchCountryOptions(searchValue, countriesData) {
	const trimmedSearchValue = StringUtils.sanitizeString(searchValue);
	if (_.isEmpty(trimmedSearchValue)) {
	return [];
	}

This also happens at here

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

We should update

1. return all if the search value is empty.

    if (_.isEmpty(trimmedSearchValue)) {
        return countriesData;
    }

2. Delete the default value and pre-select base on the IP address and remove the country prop
   

   App/src/pages/settings/Profile/PersonalDetails/AddressPage.js

   Line 69 in dd2c98b

   const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')) || country || CONST.COUNTRY.US);

const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));

3. remove setSearchValue and set default empty here
   

   App/src/components/CountryPicker/index.js

   Lines 36 to 46 in dd2c98b

   	const [searchValue, setSearchValue] = useState(lodashGet(allCountries, value, ''));
   	useEffect(() => {
   	setSearchValue(lodashGet(allCountries, value, ''));
   	}, [value, allCountries]);
   	const showPickerModal = () => {
   	setSearchValue(lodashGet(allCountries, value, ''));
   	setIsPickerVisible(true);
   	};

And the same StatePicker

4. Set empty searchValue when back the CountrySelectorModal and StateSelectorModal

    useEffect(() => {
        if (isVisible) {
            return;
        }
        setSearchValue('');
    }, [isVisible, setSearchValue]);

What alternative solutions did you explore? (Optional)

N/A

[c3024]

Proposal

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

No country options are shown when the search string is empty.

What is the root cause of that problem?

Here when the trimmed search value is empty we return empty array

App/src/libs/searchCountryOptions.js

Lines 12 to 13 in 0bdf183

	if (_.isEmpty(trimmedSearchValue)) {
	return [];

so there are no country options displayed

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

We should instead return countries data there for empty search string

return countriesData;

What alternative solutions did you explore? (Optional)

Result

displayCountriesForEmptyString.mov

[dukenv0307]

Proposal

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

Countries are not shown when clearing search country field

What is the root cause of that problem?

We return an empty array if the searchValue is empty

App/src/libs/searchCountryOptions.js

Lines 12 to 15 in fdcae9f

	if (trimmedSearchValue.length === 0) {
	return [];
	}

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

We should return countriesData here instead of return an empty array

if (trimmedSearchValue.length === 0) {
    return countriesData    ;
}

App/src/libs/searchCountryOptions.js

Lines 12 to 15 in fdcae9f

	if (trimmedSearchValue.length === 0) {
	return [];
	}

we also should reset searchValue to empty whenever we open the picker and init focus the selected option.

We also should fix this issue for other pickers like StatePicker, ...

What alternative solutions did you explore? (Optional)

NA

Resut

Screencast.from.08-08-2023.17.36.13.webm

[melvin-bot]

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

[GItGudRatio]

Proposal

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

Countries are not shown when clearing search country field

What is the root cause of that problem?

An empty array of data is returned if the search value is empty.

App/src/libs/searchCountryOptions.js

Lines 12 to 15 in fdcae9f

	if (trimmedSearchValue.length === 0) {
	return [];
	}

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

These are the similar components that behave differently compared to the Year Picker:

• Country Selector (input already present, nothing shown on empty search)
• State Selector (input already present)
• Timezone selector page (input already present)

To solve for Country Selector,

1. We should sort the countriesData by country code and return the value when search is empty.

if (_.isEmpty(trimmedSearchValue)) {
        return _.sortBy(countriesData, (country) => (_.toLower(country.value) === trimmedSearchValue ? -1 : 1));;
    }

2. Remove these lines:
   a.

   App/src/components/CountryPicker/index.js

   Lines 38 to 40 in 310b932

   	useEffect(() => {
   	setSearchValue(lodashGet(allCountries, value, ''));
   	}, [value, allCountries]);

   
   b.

   App/src/components/CountryPicker/index.js

   Lines 38 to 40 in 310b932

   	useEffect(() => {
   	setSearchValue(lodashGet(allCountries, value, ''));
   	}, [value, allCountries]);

3. Set default searchValue as '';
   

   App/src/components/CountryPicker/index.js

   Line 36 in 310b932

   const [searchValue, setSearchValue] = useState(lodashGet(allCountries, value, ''));

To solve for State Selector, we need to repeat step 2-3 for StatePicker.

To solve for Timezone selector, we need to simply set the default value to '' in

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

Line 49 in f45ddbe

const [timezoneInputText, setTimezoneInputText] = useState(timezone.current.selected);

What alternative solutions did you explore? (Optional)

We can export the sort function to a common function as well.

[grgia]

@anmurali we discussed this bug this morning and determined that we will be standardizing the pattern for inputs

https://expensify.slack.com/archives/C049HHMV9SM/p1692369698847549?thread_ts=1691489722.039289&cid=C049HHMV9SM

As a conclusion, we determined that all push to page inputs (except pronouns page) will follow the pattern used by the date picker:

This means that we will

• display all options
• search to filter options

I will be updating the description of this bug to include all affected inputs

[dukenv0307]

@grgia That means we should reset searchValue to empty whenever we open the picker again and init focus to selected option like YearPicker.

Updated proposal

[dummy-1111]

@grgia

Is this an internal issue?