MC-32271: Order of State/Province drop down is not consistent in admin UI

Author: yelahin-serhiy

app/code/Magento/Checkout/view/frontend/web/js/region-updater.js

@@ -157,7 +157,10 @@ define([
                 regionInput = $(this.options.regionInputId),
                 postcode = $(this.options.postcodeId),
                 label = regionList.parent().siblings('label'),
-                container = regionList.parents('div.field');
+                container = regionList.parents('div.field'),
+                regionsEntries,
+                regionId,
+                regionData;
 
             this._clearError();
             this._checkRegionRequired(country);
@@ -168,8 +171,14 @@ define([
             // Populate state/province dropdown list if available or use input box
             if (this.options.regionJson[country]) {
                 this._removeSelectOptions(regionList);
-                $.each(this.options.regionJson[country], $.proxy(function (key, value) {
-                    this._renderSelectOption(regionList, key, value);
+                regionsEntries = Object.entries(this.options.regionJson[country]);
+                regionsEntries.sort(function (a, b) {
+                    return a[1].name > b[1].name ? 1 : -1;
+                });
+                $.each(regionsEntries, $.proxy(function (key, value) {
+                    regionId = value[0];
+                    regionData = value[1];
+                    this._renderSelectOption(regionList, regionId, regionData);
                 }, this));
 
                 if (this.currentRegionOption) {

lib/web/mage/adminhtml/form.js

@@ -133,6 +133,7 @@ define([
             this.config = regions.config;
             delete regions.config;
             this.regions = regions;
+            this.sortedRegions = this.getSortedRegions();
             this.disableAction = typeof disableAction === 'undefined' ? 'hide' : disableAction;
             this.clearRegionValueOnDisable = typeof clearRegionValueOnDisable === 'undefined' ?
                 false : clearRegionValueOnDisable;
@@ -246,11 +247,13 @@ define([
          * Update.
          */
         update: function () {
-            var option, region, def, regionId;
+            var option, selectElement, def, regionId, region;
 
-            if (this.regions[this.countryEl.value]) {
+            selectElement = this.regionSelectEl;
+
+            if (this.sortedRegions[this.countryEl.value]) {
                 if (this.lastCountryId != this.countryEl.value) { //eslint-disable-line eqeqeq
-                    def = this.regionSelectEl.getAttribute('defaultValue');
+                    def = selectElement.getAttribute('defaultValue');
 
                     if (this.regionTextEl) {
                         if (!def) {
@@ -259,26 +262,27 @@ define([
                         this.regionTextEl.value = '';
                     }
 
-                    this.regionSelectEl.options.length = 1;
+                    selectElement.options.length = 1;
 
-                    for (regionId in this.regions[this.countryEl.value]) { //eslint-disable-line guard-for-in
-                        region = this.regions[this.countryEl.value][regionId];
+                    this.sortedRegions[this.countryEl.value].forEach(function (item) {
+                        regionId = item[0];
+                        region = item[1];
 
                         option = document.createElement('OPTION');
                         option.value = regionId;
                         option.text = region.name.stripTags();
                         option.title = region.name;
 
-                        if (this.regionSelectEl.options.add) {
-                            this.regionSelectEl.options.add(option);
+                        if (selectElement.options.add) {
+                            selectElement.options.add(option);
                         } else {
-                            this.regionSelectEl.appendChild(option);
+                            selectElement.appendChild(option);
                         }
 
                         if (regionId == def || region.name.toLowerCase() == def || region.code.toLowerCase() == def) { //eslint-disable-line
-                            this.regionSelectEl.value = regionId;
+                            selectElement.value = regionId;
                         }
-                    }
+                    });
                 }
 
                 if (this.disableAction == 'hide') { //eslint-disable-line eqeqeq
@@ -340,6 +344,28 @@ define([
                     display ? marks[0].show() : marks[0].hide();
                 }
             }
+        },
+
+        /**
+         * Sort regions from JSON by name
+         *
+         * @returns {*[]}
+         */
+        getSortedRegions: function () {
+            var country, regionsEntries, regionsByCountry;
+
+            regionsByCountry = [];
+
+            for (country in this.regions) { //eslint-disable-line guard-for-in
+                regionsEntries = Object.entries(this.regions[country]);
+                regionsEntries.sort(function (a, b) {
+                    return a[1].name > b[1].name ? 1 : -1;
+                });
+
+                regionsByCountry[country] = regionsEntries;
+            }
+
+            return regionsByCountry;
         }
     };