Civicrm state field not working for webforms

Yeah, there is a lot of legacy stuff in there. We'll need to break down and identify each task that needs to be completed.

  $items['webform-civicrm/js/%'] = array(
    'page callback' => 'wf_crm_ajax',
    'file' => 'includes/wf_crm_webform_ajax.inc',
    'access callback' => TRUE,
    'page arguments' => array(2),
    'type' => MENU_CALLBACK,
  );

This is a slight passthru to return the following values

  /**
   * Populate a state list based on chosen country
   * @param string $input
   */
  function stateProvince($input) {
    if (!$input || (intval($input) != $input && $input != 'default')) {
      drupal_json_output(array('' => t('- first choose a country -')));
      exit();
    }
    drupal_json_output(Utils::wf_crm_get_states($input));
    exit();
  }

It feels like this could better leverage Drupal's Form APIs versus bespoke AJAX and JavaScript handling.

+1 to Form API

I tested on the latest 8.x-5.x-dev release, dated 6th September.

The states loaded correctly, hooray! However when submitting, there was a form validation error. I selected country United Kingdom and state Bristol, city of. The error was:

Mismatch: "BST" is not a state/province of United States. Please enter a valid state/province abbreviation for State/Province.

This occurred regardless of whether United Kingdom was set in Civi as the default country.

Hi Dave! This is working -> (see screenshot) ->

In CiviCRM:
I have enabled 3 countries in CiviCRM -> civicrm/admin/setting/localization?reset=1
Canada, Netherlands, United States (under Available Countries as well as under Available States and Provinces.
Canada is set to Default Country

On the Webform:
I can select any of these three countries on the webform and the states/province select is properly repopulated and Submit works fine.

Here's the YAML that goes with the screenshot I posted.

flexbox:
  '#type': flexbox
  civicrm_1_contact_1_contact_first_name:
    '#type': textfield
    '#contact_type': individual
    '#form_key': civicrm_1_contact_1_contact_first_name
    '#extra':
      width: 20
    '#title': 'First Name'
  civicrm_1_contact_1_contact_last_name:
    '#type': textfield
    '#contact_type': individual
    '#form_key': civicrm_1_contact_1_contact_last_name
    '#extra':
      width: 20
    '#title': 'Last Name'
flexbox_02:
  '#type': flexbox
  civicrm_1_contact_1_address_street_address:
    '#type': textfield
    '#extra':
      width: 60
    '#form_key': civicrm_1_contact_1_address_street_address
    '#title': 'Street Address'
  civicrm_1_contact_1_address_city:
    '#type': textfield
    '#extra':
      width: 20
    '#form_key': civicrm_1_contact_1_address_city
    '#title': City
flexbox_03:
  '#type': flexbox
  civicrm_1_contact_1_address_country_id:
    '#type': civicrm_options
    '#extra':
      civicrm_live_options: 1
      items: |
        1039|Canada
        1152|Netherlands
        1228|United States
        
      aslist: true
    '#value': '1039'
    '#form_key': civicrm_1_contact_1_address_country_id
    '#options':
      1039: Canada
      1152: Netherlands
      1228: 'United States'
    '#title': Country
    '#default_option': null
    '#default_value': null
  civicrm_1_contact_1_address_state_province_id:
    '#type': textfield
    '#extra':
      maxlength: 5
      width: 4
    '#data_type': state_province_abbr
    '#form_key': civicrm_1_contact_1_address_state_province_id
    '#title': State/Province
  civicrm_1_contact_1_address_postal_code:
    '#type': textfield
    '#extra':
      width: 7
    '#form_key': civicrm_1_contact_1_address_postal_code
    '#title': 'Postal Code'