Theme addresses doesn't show default country

[driespieters]

The default country of the logged in user isn't selected on page load.

Issue seems to be here: if (countrySelect.dataset.default) { countrySelect.value = countrySelect.dataset.default; }

The value should be a country code for it to work, but countrySelect.dataset.default is a full country name.

For example. If one uses data-default="BE" (Belgium) in templates/customer/addresses in stead of data-default="{{ form.country }}" it does work.

Note: I'm using a Dutch theme locale on the slate starter theme.

[andytron]

For the time being I'm tapping into the country_code value from the customer_address object (e.g. https://help.shopify.com/en/themes/liquid/objects/customer-address#customer_address-country_code), but would be great if this could be fixed

[MrSpecific]

@andytron - I've create a fix for this bug. In @shopify/theme-addresses/addressForm.js you can make two modifications. Firstly, in the populateCountries() function, replace:

if (countrySelect.dataset.default) {
    countrySelect.value = countrySelect.dataset.default;
  }

with

if (countrySelect.dataset.default) {
    var defaultValue = countrySelect.dataset.default.length > 2 ? countries.find((country) => {
      return country.name === countrySelect.dataset.default;
    }) : countrySelect.dataset.default;

    countrySelect.value = defaultValue.code;
  }

and then in the populateZones() function, replace:

if (zoneSelect.dataset.default) {
    zoneSelect.value = zoneSelect.dataset.default;
  }

with:

if (zoneSelect.dataset.default) {
    var defaultValue = zoneSelect.dataset.default.length > 2 ? country.zones.find((zone) => {
      return zone.name === zoneSelect.dataset.default;
    }) : zoneSelect.dataset.default;

    if (typeof defaultValue === 'object') {
      defaultValue = defaultValue.code;
    }

    zoneSelect.value = defaultValue;
  }

Pretty hacky, but hopefully Shopify will fix this bug soon. Super frustrating that such a crucial piece of functionality is broken.

[MrSpecific]

Also, I've submitted a pull request to implement a version of this fix (although re-written in ES5 to appease Travis/Lerna). It's not ideal (the ES5 version is more invasive), but it works.

[devolkpl]

I found another possible bug. If the country is set to "Russia", the default value of province is not working. My workaround: in populateZones() replace

return zone.name === zoneSelect.dataset.default;

with

return zone.code === zoneSelect.dataset.default;

It requires to make a change in addresses.liquid file. Replace

<select
name="address[province]"
id="AddressProvince_{{ form.id }}"
data-default="{{ form.province }}">

with

<select
name="address[province]"
id="AddressProvince_{{ form.id }}"
data-default="{{ address.province_code }}">

[tommypepsi]

To add to the previous comment here, data-default is expecting the country code and province code but with the example in the read me they use {{ form.country }} and {{ form.province }} which return the country name and province name which leaves the fields blank. Also had to change them to {{ address.country_code }} and {{ address.province_code }} for the field to show the correct values.