diff --git a/src/components/AddressSearch/index.js b/src/components/AddressSearch/index.js index 14d13a63eec3..83a410b7f0b0 100644 --- a/src/components/AddressSearch/index.js +++ b/src/components/AddressSearch/index.js @@ -208,14 +208,15 @@ function AddressSearch(props) { // Autocomplete returns any additional valid address fragments (e.g. Apt #) as subpremise. street2: subpremise, - + // Make sure country is updated first, since city and state will be reset if the country changes + country: '', // When locality is not returned, many countries return the city as postalTown (e.g. 5 New Street // Square, London), otherwise as sublocality (e.g. 384 Court Street Brooklyn). If postalTown is // returned, the sublocality will be a city subdivision so shouldn't take precedence (e.g. // Salagatan, Upssala, Sweden). city: locality || postalTown || sublocality || cityAutocompleteFallback, zipCode, - country: '', + state: state || stateAutoCompleteFallback, lat: lodashGet(details, 'geometry.location.lat', 0), lng: lodashGet(details, 'geometry.location.lng', 0), diff --git a/src/pages/settings/Profile/PersonalDetails/AddressPage.js b/src/pages/settings/Profile/PersonalDetails/AddressPage.js index 391516e3d63b..f7766756bf22 100644 --- a/src/pages/settings/Profile/PersonalDetails/AddressPage.js +++ b/src/pages/settings/Profile/PersonalDetails/AddressPage.js @@ -80,6 +80,7 @@ function AddressPage({privatePersonalDetails, route}) { const isLoadingPersonalDetails = lodashGet(privatePersonalDetails, 'isLoading', true); const [street1, street2] = (address.street || '').split('\n'); const [state, setState] = useState(address.state); + const [city, setCity] = useState(address.city); useEffect(() => { if (!address) { @@ -135,15 +136,20 @@ function AddressPage({privatePersonalDetails, route}) { }, []); const handleAddressChange = useCallback((value, key) => { - if (key !== 'country' && key !== 'state') { + if (key !== 'country' && key !== 'state' && key !== 'city') { return; } if (key === 'country') { setCurrentCountry(value); setState(''); + setCity(''); return; } - setState(value); + if (key === 'state') { + setState(value); + return; + } + setCity(value); }, []); useEffect(() => { @@ -235,9 +241,10 @@ function AddressPage({privatePersonalDetails, route}) { label={translate('common.city')} accessibilityLabel={translate('common.city')} accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} - defaultValue={address.city || ''} + value={city || ''} maxLength={CONST.FORM_CHARACTER_LIMIT} spellCheck={false} + onValueChange={handleAddressChange} />