Workaround for Chrome 140 issues

[haslinghuis]

• Previous fix introduced other issues - Fix for Chromium v140 select issue #4597

Summary by CodeRabbit

• Bug Fixes
  • Improved stability on Chrome v140 by temporarily disabling automatic sorting of dropdown options. Options now display in their original order, with no impact to selection or interaction.

[coderabbitai]

Walkthrough

The $.fn.sortSelect plugin in src/js/utils/common.js has been effectively disabled by commenting out its internal logic due to Chrome v140 issues. The function remains defined and returns this, but no option collection, sorting, or DOM updates occur.

Changes

Cohort / File(s)	Summary
Disable sortSelect logic src/js/utils/common.js	Wrapped the body of $.fn.sortSelect in a block comment with a Chrome v140 note; retained function signature and return this, removing all sorting and DOM manipulation behavior.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Fix for Chromium v140 select issue #4597 — Disables the same $.fn.sortSelect sorting logic as a workaround for Chromium v140 behavior.

Suggested reviewers

• nerdCopter
• Quick-Flash
• blckmn

Pre-merge checks (1 passed, 2 inconclusive)

❌ Failed checks (2 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	The title correctly identifies that this pull request addresses Chrome 140 issues, which is indeed the driver for the change, but it does not specify what was actually modified or which component is affected, making it too generic to clearly convey the main change.	Please update the title to explicitly reference the primary change—such as disabling or commenting out the sortSelect plugin—to clearly convey what the workaround entails and which component it affects.
Description Check	❓ Inconclusive	There is no pull request description provided here to compare against the repository’s required template, so it’s impossible to verify that all mandatory sections (e.g., problem statement, implementation details, testing instructions) are present and complete.	Please include the full pull request description following the project’s template, ensuring sections such as summary, motivation, implementation details, and test plan are populated so the review team can assess the change thoroughly.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

Preview URL: https://0f984895.betaflight-configurator.pages.dev

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/js/utils/common.js (1)

95-133: Disabling sortSelect is a functional regression; guard and keep behavior instead.

Commenting out the body turns the plugin into a no-op and will leave selects unsorted across the UI. Drawing on the retrieved learnings (prior native DOM rewrite), keep the logic but wrap it in a try/catch so only broken environments degrade gracefully.

Apply this diff:

 $.fn.sortSelect = function (text = "") {
-    /*
-
-    Chrome v140 does not work with sortSelect function properly.
-    Disabling it for now until a fix is found.
-
-    this.each(function () {
-        const select = this;
-        // Collect option data
-        const optionData = Array.from(select.options).map(opt => ({
-            value: opt.value,
-            text: opt.text,
-            selected: opt.selected,
-            disabled: opt.disabled,
-        }));
-
-        // Sort option data
-        optionData.sort((a, b) => {
-            if (a.text === text) { return -1; }
-            if (b.text === text) { return 1; }
-            return a.text.localeCompare(b.text, window.navigator.language, { ignorePunctuation: true });
-        });
-
-        // Remove all options
-        while (select.options.length) { select.remove(0); }
-
-        // Add sorted options
-        optionData.forEach(opt => {
-            const option = document.createElement("option");
-            option.value = opt.value;
-            option.text = opt.text;
-            option.selected = opt.selected;
-            option.disabled = opt.disabled;
-            select.add(option);
-        });
-    });
-
-    */
+    // Chrome 140 workaround: keep behavior but guard with try/catch so only failures degrade to no-op.
+    try {
+        this.each(function () {
+            const select = this;
+            if (!select || select.tagName !== "SELECT") return;
+            // Collect option data
+            const optionData = Array.from(select.options).map(opt => ({
+                value: opt.value,
+                text: opt.text,
+                selected: opt.selected,
+                disabled: opt.disabled,
+            }));
+            // Sort option data
+            optionData.sort((a, b) => {
+                if (a.text === text) { return -1; }
+                if (b.text === text) { return 1; }
+                return a.text.localeCompare(b.text, window.navigator.language, { ignorePunctuation: true });
+            });
+            // Remove all options
+            while (select.options.length) { select.remove(0); }
+            // Add sorted options
+            optionData.forEach(opt => {
+                const option = document.createElement("option");
+                option.value = opt.value;
+                option.text = opt.text;
+                option.selected = opt.selected;
+                option.disabled = opt.disabled;
+                select.add(option);
+            });
+        });
+    } catch (e) {
+        // Known Chrome 140 issue — fail soft: leave the select as-is.
+        console.warn("sortSelect: falling back to no-op due to browser bug:", e);
+    }
 
     return this;
 };

🧹 Nitpick comments (2)

src/js/utils/common.js (2)

117-128: Reduce reflows; using a DocumentFragment may also dodge the Chrome 140 bug.

Batch DOM writes via a fragment and replaceChildren; it’s faster and can avoid re-entrant mutation pitfalls.

-        // Remove all options
-        while (select.options.length) { select.remove(0); }
-
-        // Add sorted options
-        optionData.forEach(opt => {
-            const option = document.createElement("option");
-            option.value = opt.value;
-            option.text = opt.text;
-            option.selected = opt.selected;
-            option.disabled = opt.disabled;
-            select.add(option);
-        });
+        // Rebuild options with minimal reflow
+        const frag = document.createDocumentFragment();
+        optionData.forEach(opt => {
+            const option = document.createElement("option");
+            option.value = opt.value;
+            option.text = opt.text;
+            option.selected = opt.selected;
+            option.disabled = opt.disabled;
+            frag.appendChild(option);
+        });
+        select.replaceChildren(frag);

---

95-99: Scope sortSelect disabling to Chrome v140 only.

 $.fn.sortSelect = function (text = "") {
+   const ua = (typeof navigator !== "undefined" && navigator.userAgent) || "";
+   if (/Chrome\/140\./.test(ua) && !/Edg\//.test(ua)) return this;
     // existing implementation…

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eed7343 and 0f98489.

📒 Files selected for processing (1)

• src/js/utils/common.js (2 hunks)

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: haslinghuis
PR: betaflight/betaflight-configurator#4597
File: src/js/utils/common.js:95-127
Timestamp: 2025-09-09T20:02:33.475Z
Learning: In the Betaflight Configurator codebase, the Chromium v140 compatibility issue with sortSelect was resolved by rewriting the implementation to use native DOM APIs (Array.from, select.options, select.remove, select.add) instead of jQuery DOM manipulation methods (this.children, this.empty().append). The fix still performs DOM operations but avoids the specific jQuery methods that were causing issues in Chromium v140.

📚 Learning: 2025-09-09T20:02:33.475Z

Learnt from: haslinghuis
PR: betaflight/betaflight-configurator#4597
File: src/js/utils/common.js:95-127
Timestamp: 2025-09-09T20:02:33.475Z
Learning: In the Betaflight Configurator codebase, the Chromium v140 compatibility issue with sortSelect was resolved by rewriting the implementation to use native DOM APIs (Array.from, select.options, select.remove, select.add) instead of jQuery DOM manipulation methods (this.children, this.empty().append). The fix still performs DOM operations but avoids the specific jQuery methods that were causing issues in Chromium v140.

Applied to files:

• src/js/utils/common.js