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}
/>