Update sort function

src/js/tabs/motors.js

@@ -333,7 +333,7 @@ motors.initialize = async function (callback) {
             });
         }
 
-        sortElement('select.mixerList');
+        mixerListElement.sortSelect();
 
         function refreshMixerPreview() {
             const mixer = FC.MIXER_CONFIG.mixer;
@@ -648,7 +648,7 @@ motors.initialize = async function (callback) {
             escProtocolElement.append(`<option value="${j + 1}">${escProtocols[j]}</option>`);
         }
 
-        sortElement('select.escprotocol');
+        escProtocolElement.sortSelect("DISABLED");
 
         const unsyncedPWMSwitchElement = $("input[id='unsyncedPWMSwitch']");
         const divUnsyncedPWMFreq = $('div.unsyncedpwmfreq');

src/js/tabs/receiver.js

@@ -252,13 +252,7 @@ receiver.initialize = function (callback) {
 
         // Convert to select2 and order alphabetic
         if (!GUI.isCordova()) {
-            serialRxSelectElement.select2({
-                sorter(data) {
-                    return data.sort(function(a, b) {
-                        return a.text.localeCompare(b.text);
-                    });
-                },
-            });
+            serialRxSelectElement.sortSelect().select2();
         }
 
         const spiRxTypes = [
@@ -314,13 +308,7 @@ receiver.initialize = function (callback) {
 
         if (!GUI.isCordova()) {
             // Convert to select2 and order alphabetic
-            spiRxElement.select2({
-                sorter(data) {
-                    return data.sort(function(a, b) {
-                        return a.text.localeCompare(b.text);
-                    });
-                },
-            });
+            spiRxElement.sortSelect().select2();
         }
 
         if (FC.FEATURE_CONFIG.features.isEnabled('RX_SPI') && FC.RX_CONFIG.rxSpiProtocol == 19 && semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {

src/js/utils/common.js

@@ -87,20 +87,29 @@ export function getTextWidth(text) {
     return Math.ceil(context.measureText(text).width);
 }
 
-export function sortElement(element, keepDown = "DISABLED") {
-    const list = document.querySelector(element);
-    [...list.children]
-        .sort((a, b) => {
-            if (a.innerText === keepDown) {
-                return 1;
-            } else if (b.innerText === keepDown) {
-                return -1;
-            } else {
-                return a.innerText > b.innerText ? 1 : -1;
-            }
-        })
-        .forEach(node => list.appendChild(node));
-}
+/**
+ * Returns jquery sorted option list with optional value staying on top of the list.
+ *
+ * @param {string} optional value staying on top of the list.
+ * @return {object} sorted option list.
+ */
+
+$.fn.sortSelect = function(text = "") {
+    const op = this.children("option");
+
+    op.sort((a, b) => {
+        console.log(a.value, a.text);
+        if (a.text === text) {
+            return -1;
+        }
+        if (b.text === text) {
+            return 1;
+        }
+        return a.text.localeCompare(b.text, window.navigator.language, { ignorePunctuation: true });
+    });
+
+    return this.empty().append(op);
+};
 
 // TODO: these are temp binding while transition to module happens
 window.degToRad = degToRad;
@@ -110,4 +119,3 @@ window.checkChromeRuntimeError = checkChromeRuntimeError;
 window.generateVirtualApiVersions = generateVirtualApiVersions;
 window.getMixerImageSrc = getMixerImageSrc;
 window.getTextWidth = getTextWidth;
-window.sortElement = sortElement;