diff --git a/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue index b9e6b6f60..f050cd204 100644 --- a/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue +++ b/packages/theme/modules/customer/pages/MyAccount/AddressesDetails/AddressForm.vue @@ -281,18 +281,21 @@ export default defineComponent({ setup(props, { emit }) { const { load: loadCountries, search: searchCountry } = useCountrySearch(); + const form = ref(null); + const countries = ref([]); const countriesList = computed(() => addressGetter.countriesList(countries.value)); - const country = ref(null); + const regionInformation = computed(() => addressGetter.regionList(country.value)); + const updateCountry = async (params: UseCountrySearchParams) => { country.value = await searchCountry(params); + form.value.region = { + // let region SfSelect know it should display initial state + ...(regionInformation.value.length > 0 ? { region_id: null } : {}), + }; }; - const regionInformation = computed(() => addressGetter.regionList(country.value)); - - const form = ref(null); - watch(() => props.address, () => { form.value = { apartment: props.address.apartment, @@ -329,7 +332,7 @@ export default defineComponent({ onBeforeMount(async () => { countries.value = await loadCountries(); if (props.address.country_code) { - await updateCountry({ id: props.address.country_code }); + country.value = await searchCountry({ id: props.address.country_code }); } });