Added autofocus on Select2 elements with a textbox (#3299)

* Added autofocus on Select2 elements with a textbox * Apply suggestions from code review Co-authored-by: Mark Haslinghuis <[email protected]> --------- Co-authored-by: Mark Haslinghuis <[email protected]>
betaflight · Feb 1, 2023 · fc6bcc2 · fc6bcc2
1 parent b4d1375
commit fc6bcc2
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/src/js/tabs/firmware_flasher.js b/src/js/tabs/firmware_flasher.js
@@ -443,6 +443,23 @@ firmware_flasher.initialize = function (callback) {
                 }
             }
         });
+        // when any of the select2 elements is opened, force a focus on that element's search box
+        const select2Elements = [
+            'select[name="board"]',
+            'select[name="radioProtocols"]',
+            'select[name="telemetryProtocols"]',
+            'select[name="motorProtocols"]',
+            'select[name="options"]',
+            'select[name="commits"]',
+        ];
+        $(document).on('select2:open', select2Elements.join(','), () => {
+            const allFound = document.querySelectorAll('.select2-container--open .select2-search__field');
+            $(this).one('mouseup keyup', () => {
+                setTimeout(() => {
+                    allFound[allFound.length - 1].focus();
+                }, 0);
+            });
+        });
 
         function cleanUnifiedConfigFile(input) {
             let output = [];

diff --git a/src/js/tabs/receiver.js b/src/js/tabs/receiver.js
@@ -277,6 +277,15 @@ receiver.initialize = function (callback) {
         // Convert to select2 and order alphabetic
         if (!GUI.isCordova()) {
             serialRxSelectElement.sortSelect().select2();
+
+            $(document).on('select2:open', 'select.serialRX', () => {
+                const allFound = document.querySelectorAll('.select2-container--open .select2-search__field');
+                $(this).one('mouseup keyup',()=>{
+                    setTimeout(()=>{
+                        allFound[allFound.length - 1].focus();
+                    },0);
+                });
+            });
         }
 
         const spiRxTypes = [
@@ -336,6 +345,15 @@ receiver.initialize = function (callback) {
         if (!GUI.isCordova()) {
             // Convert to select2 and order alphabetic
             spiRxElement.sortSelect().select2();
+
+            $(document).on('select2:open', 'select.spiRx', () => {
+                const allFound = document.querySelectorAll('.select2-container--open .select2-search__field');
+                $(this).one('mouseup keyup',()=>{
+                    setTimeout(()=>{
+                        allFound[allFound.length - 1].focus();
+                    },0);
+                });
+            });
         }
 
         if (FC.FEATURE_CONFIG.features.isEnabled('RX_SPI') && FC.RX_CONFIG.rxSpiProtocol == 19 && semver.gte(FC.CONFIG.apiVersion, API_VERSION_1_45)) {