show all selection and clear a search input field

src/components/CountryPicker/CountrySelectorModal.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useMemo} from 'react';
+import React, {useMemo, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import CONST from '../../CONST';
 import useLocalize from '../../hooks/useLocalize';
@@ -40,6 +40,13 @@ const defaultProps = {
 function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySelected, setSearchValue, searchValue}) {
     const {translate} = useLocalize();
 
+    useEffect(() => {
+        if (isVisible) {
+            return;
+        }
+        setSearchValue('');
+    }, [isVisible, setSearchValue]);
+
     const countries = useMemo(
         () =>
             _.map(translate('allCountries'), (countryName, countryISO) => ({
@@ -76,7 +83,6 @@ function CountrySelectorModal({currentCountry, isVisible, onClose, onCountrySele
                 <SelectionList
                     headerMessage={headerMessage}
                     textInputLabel={translate('common.country')}
-                    textInputPlaceholder={translate('countrySelectorModal.placeholderText')}
                     textInputValue={searchValue}
                     sections={[{data: searchResults, indexOffset: 0}]}
                     onSelectRow={onCountrySelected}

src/components/CountryPicker/index.js

@@ -1,7 +1,6 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
-import lodashGet from 'lodash/get';
 import styles from '../../styles/styles';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
 import useLocalize from '../../hooks/useLocalize';
@@ -34,14 +33,9 @@ function CountryPicker({value, errorText, onInputChange, forwardedRef}) {
     const {translate} = useLocalize();
     const allCountries = translate('allCountries');
     const [isPickerVisible, setIsPickerVisible] = useState(false);
-    const [searchValue, setSearchValue] = useState(lodashGet(allCountries, value, ''));
-
-    useEffect(() => {
-        setSearchValue(lodashGet(allCountries, value, ''));
-    }, [value, allCountries]);
+    const [searchValue, setSearchValue] = useState('');
 
     const showPickerModal = () => {
-        setSearchValue(lodashGet(allCountries, value, ''));
         setIsPickerVisible(true);
     };
 

src/components/StatePicker/StateSelectorModal.js

@@ -1,5 +1,5 @@
 import _ from 'underscore';
-import React, {useMemo} from 'react';
+import React, {useMemo, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import CONST from '../../CONST';
 import Modal from '../Modal';
@@ -44,6 +44,13 @@ const defaultProps = {
 function StateSelectorModal({currentState, isVisible, onClose, onStateSelected, searchValue, setSearchValue, label}) {
     const {translate} = useLocalize();
 
+    useEffect(() => {
+        if (isVisible) {
+            return;
+        }
+        setSearchValue('');
+    }, [isVisible, setSearchValue]);
+
     const countryStates = useMemo(
         () =>
             _.map(translate('allStates'), (state) => ({
@@ -81,7 +88,6 @@ function StateSelectorModal({currentState, isVisible, onClose, onStateSelected,
                 <SelectionList
                     headerMessage={headerMessage}
                     textInputLabel={label || translate('common.state')}
-                    textInputPlaceholder={translate('stateSelectorModal.placeholderText')}
                     textInputValue={searchValue}
                     sections={[{data: searchResults, indexOffset: 0}]}
                     onSelectRow={onStateSelected}

src/components/StatePicker/index.js

@@ -1,6 +1,5 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {View} from 'react-native';
-import lodashGet from 'lodash/get';
 import PropTypes from 'prop-types';
 import styles from '../../styles/styles';
 import MenuItemWithTopDescription from '../MenuItemWithTopDescription';
@@ -38,14 +37,9 @@ function StatePicker({value, errorText, onInputChange, forwardedRef, label}) {
     const {translate} = useLocalize();
     const allStates = translate('allStates');
     const [isPickerVisible, setIsPickerVisible] = useState(false);
-    const [searchValue, setSearchValue] = useState(lodashGet(allStates, `${value}.stateName`, ''));
-
-    useEffect(() => {
-        setSearchValue(lodashGet(allStates, `${value}.stateName`, ''));
-    }, [value, allStates]);
+    const [searchValue, setSearchValue] = useState('');
 
     const showPickerModal = () => {
-        setSearchValue(lodashGet(allStates, `${value}.stateName`, ''));
         setIsPickerVisible(true);
     };
 

src/languages/en.js

@@ -1628,12 +1628,6 @@ export default {
             selectSuggestedAddress: 'Please select a suggested address',
         },
     },
-    countrySelectorModal: {
-        placeholderText: 'Search to see options',
-    },
-    stateSelectorModal: {
-        placeholderText: 'Search to see options',
-    },
     demos: {
         saastr: {
             signInWelcome: 'Welcome to SaaStr! Hop in to start networking now.',

src/languages/es.js

@@ -2115,12 +2115,6 @@ export default {
             selectSuggestedAddress: 'Por favor, selecciona una dirección sugerida',
         },
     },
-    countrySelectorModal: {
-        placeholderText: 'Buscar para ver opciones',
-    },
-    stateSelectorModal: {
-        placeholderText: 'Buscar para ver opciones',
-    },
     demos: {
         saastr: {
             signInWelcome: '¡Bienvenido a SaaStr! Entra y empieza a establecer contactos.',

src/libs/searchCountryOptions.js

@@ -8,6 +8,10 @@ import StringUtils from './StringUtils';
  * @returns {Object[]} An array of countries/states sorted based on the search query
  */
 function searchCountryOptions(searchValue, countriesData) {
+    if (_.isEmpty(searchValue)) {
+        return countriesData;
+    }
+
     const trimmedSearchValue = StringUtils.sanitizeString(searchValue);
     if (_.isEmpty(trimmedSearchValue)) {
         return [];

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

@@ -26,9 +26,6 @@ import FullscreenLoadingIndicator from '../../../../components/FullscreenLoading
 const propTypes = {
     /* Onyx Props */
 
-    // The user's country based on IP address
-    country: PropTypes.string,
-
     /** User's private personal details */
     privatePersonalDetails: PropTypes.shape({
         /** User's home address */
@@ -43,7 +40,6 @@ const propTypes = {
 };
 
 const defaultProps = {
-    country: '',
     privatePersonalDetails: {
         address: {
             street: '',
@@ -63,10 +59,10 @@ function updateAddress(values) {
     PersonalDetails.updateAddress(values.addressLine1.trim(), values.addressLine2.trim(), values.city.trim(), values.state.trim(), values.zipPostCode.trim().toUpperCase(), values.country);
 }
 
-function AddressPage({privatePersonalDetails, country}) {
+function AddressPage({privatePersonalDetails}) {
     usePrivatePersonalDetails();
     const {translate} = useLocalize();
-    const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')) || country || CONST.COUNTRY.US);
+    const [currentCountry, setCurrentCountry] = useState(PersonalDetails.getCountryISO(lodashGet(privatePersonalDetails, 'address.country')));
     const isUSAForm = currentCountry === CONST.COUNTRY.US;
     const zipSampleFormat = lodashGet(CONST.COUNTRY_ZIP_REGEX_DATA, [currentCountry, 'samples'], '');
     const zipFormat = translate('common.zipCodeExampleFormat', {zipSampleFormat});
@@ -237,9 +233,6 @@ AddressPage.propTypes = propTypes;
 AddressPage.defaultProps = defaultProps;
 
 export default withOnyx({
-    country: {
-        key: ONYXKEYS.COUNTRY,
-    },
     privatePersonalDetails: {
         key: ONYXKEYS.PRIVATE_PERSONAL_DETAILS,
     },

src/pages/settings/Profile/TimezoneSelectPage.js

@@ -46,7 +46,7 @@ function TimezoneSelectPage(props) {
             }))
             .value(),
     );
-    const [timezoneInputText, setTimezoneInputText] = useState(timezone.selected);
+    const [timezoneInputText, setTimezoneInputText] = useState('');
     const [timezoneOptions, setTimezoneOptions] = useState(allTimezones.current);
 
     /**