Answers.Body: <p>This is caused by the <code>model.countryId</code> not being defined on first page load, which means the options defaults to an empty array. Once the address is saved, the selected country that is saved will provide the <code>countryId</code> and therefore your states dropdown is populated the second time around.</p>
  <p>IIRC, the sample Commerce templates hide the text field and show the states dropdown field via JavaScript based on the selected value of the country dropdown.</p>
  <p>If you know you're always going to default to United States as the initially selected country, you could ensure your state text field is hidden by default and set a default country ID:</p>
  <pre><code>{# Note: example country ID #}
  {% set defaultCountryId = 51 %}
      
  {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : states[defaultCountryId]) %}
  </code></pre>
  <p>I think you could get the correct country ID for the USA from <code>craft.commerce.countries.allEnabledCountriesAsList</code> to use with your default var.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-04T19:08:41.887Z
Answers.Text: Thanks so much! That worked for me. By the way I found my country ID by clicking edit on the United States in the Countries & States part of the CP.
Answers.UserDisplayName: Chris H.
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-08-04T09:07:23.593Z
Answers.LastActivityDate: 2020-08-04T09:07:23.593Z
Answers.UserDisplayName: Martin Spain
Body: <p>I'm having an issue with addresses on Craft Commerce 3 (specifically the State field).</p>
  <p>When a new customer adds an address, the State field defaults to a text field (not the expected Select field).</p>
  <p>If you save the address and then go back, the State field turns back into the Select field (and defaults to Alabama). This is an issue because the form isn't actually collecting a valid State the first time through.</p>
  <p>You can see reproduce this issue at <a href="https://renewable-lubricants.net/products/checkout/addresses" rel="nofollow noreferrer">https://renewable-lubricants.net/products/checkout/addresses</a></p>
  <p>This issue is happening both on my modified templates as well as the latest stock Sample Templates, with no modifications.</p>
  <p>The problem seems to be with this block of twig code below in &quot;addresses/form.twig&quot;. Any idea what would make &quot;options&quot; fail the first time through?</p>
  <pre><code>&lt;label for=&quot;{{ modelName }}-state&quot;&gt;State&lt;/label&gt;
                      {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                      &lt;select id=&quot;{{ modelName }}-stateId&quot; data-modelname=&quot;{{ modelName }}&quot; class=&quot;js-address-stateId w-full {% if options|length == 0 %}hidden{% endif %}&quot; name=&quot;{{ modelName }}[stateValue]&quot;&gt;
                          {% for key, option in options %}
                              {% set optionValue = (model ? model.stateId : '') %}
                              &lt;option value=&quot;{{ key }}&quot; {% if key == optionValue %}selected{% endif %}&gt;{{ option }}&lt;/option&gt;
                          {% endfor %}
                      &lt;/select&gt;
                      &lt;input type=&quot;text&quot; data-modelname=&quot;{{ modelName }}&quot; id=&quot;{{ modelName }}-stateName&quot; class=&quot;js-address-stateName {% if options|length &gt; 0 %}hidden{% endif %} w-full&quot; {% if options|length == 0 %}name=&quot;{{ modelName }}[stateValue]&quot;{% endif %} value=&quot;{{ model ? model.stateName : '' }}&quot;&gt;
                      {% if model and model.getErrors('stateValue') %}
                          &lt;span class=&quot;flash&quot;&gt;{{ model.getErrors('stateValue')|join }}&lt;/span&gt;
                      {% endif %}
  </code></pre>
  <p><a href="https://i.sstatic.net/u6bFJ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/u6bFJ.png" alt="Sample form fields" /></a></p>
  
Tags: <plugin-craftcommerce><addresses><cart>
Title: Craft Commerce "state" dropdown field fails to populate with states for new customer addresses
ThreadText: # Craft Commerce "state" dropdown field fails to populate with states for new customer addresses
  
  (Asked by: username_0 on 2020-08-01)
  
  I'm having an issue with addresses on Craft Commerce 3 (specifically the State field).
  
  When a new customer adds an address, the State field defaults to a text field (not the expected Select field).
  
  If you save the address and then go back, the State field turns back into the Select field (and defaults to Alabama). This is an issue because the form isn't actually collecting a valid State the first time through.
  
  You can see reproduce this issue at <https://renewable-lubricants.net/products/checkout/addresses>
  
  This issue is happening both on my modified templates as well as the latest stock Sample Templates, with no modifications.
  
  The problem seems to be with this block of twig code below in "addresses/form.twig". Any idea what would make "options" fail the first time through?
  
  ```
  <label for="{{ modelName }}-state">State</label>
                      {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : []) %}
                      <select id="{{ modelName }}-stateId" data-modelname="{{ modelName }}" class="js-address-stateId w-full {% if options|length == 0 %}hidden{% endif %}" name="{{ modelName }}[stateValue]">
                          {% for key, option in options %}
                              {% set optionValue = (model ? model.stateId : '') %}
                              <option value="{{ key }}" {% if key == optionValue %}selected{% endif %}>{{ option }}</option>
                          {% endfor %}
                      </select>
                      <input type="text" data-modelname="{{ modelName }}" id="{{ modelName }}-stateName" class="js-address-stateName {% if options|length > 0 %}hidden{% endif %} w-full" {% if options|length == 0 %}name="{{ modelName }}[stateValue]"{% endif %} value="{{ model ? model.stateName : '' }}">
                      {% if model and model.getErrors('stateValue') %}
                          <span class="flash">{{ model.getErrors('stateValue')|join }}</span>
                      {% endif %}
  
  ```
  
  [![Sample form fields](https://i.sstatic.net/u6bFJ.png)](https://i.sstatic.net/u6bFJ.png)
  
  **Tags:** plugin-craftcommerce, addresses, cart
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2020-08-04. Score: 1 | Accepted answer
  
  This is caused by the `model.countryId` not being defined on first page load, which means the options defaults to an empty array. Once the address is saved, the selected country that is saved will provide the `countryId` and therefore your states dropdown is populated the second time around.
  
  IIRC, the sample Commerce templates hide the text field and show the states dropdown field via JavaScript based on the selected value of the country dropdown.
  
  If you know you're always going to default to United States as the initially selected country, you could ensure your state text field is hidden by default and set a default country ID:
  
  ```
  {# Note: example country ID #}
  {% set defaultCountryId = 51 %}
      
  {% set options = (model and states[model.countryId] is defined ? states[model.countryId] : states[defaultCountryId]) %}
  
  ```
  
  I think you could get the correct country ID for the USA from `craft.commerce.countries.allEnabledCountriesAsList` to use with your default var.
  
  > **Comments:**
  > **username_0**: Thanks so much! That worked for me. By the way I found my country ID by clicking edit on the United States in the Countries & States part of the CP.  
  
  ---
  
  