From e1a4f0772480077e9da8bfa055f4f86db1ecccb1 Mon Sep 17 00:00:00 2001
From: Quentin Dupont <quentin.dupont@grap.coop>
Date: Fri, 26 Jun 2026 11:11:00 +0200
Subject: [PATCH] [16.0][IMP] web_responsive sorted-companies

---
 .../src/js/web_responsive_company.esm.js       | 18 ++++++++++++------
 .../static/src/xml/web_responsive_company.xml  |  2 +-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web_responsive_company/static/src/js/web_responsive_company.esm.js b/web_responsive_company/static/src/js/web_responsive_company.esm.js
index 217d40ee6ac1..b3fcd37eb11f 100644
--- a/web_responsive_company/static/src/js/web_responsive_company.esm.js
+++ b/web_responsive_company/static/src/js/web_responsive_company.esm.js
@@ -9,11 +9,17 @@ patch(SwitchCompanyMenu.prototype, "web_responsive_company.SwitchCompanyMenu", {
     setup() {
         this._super();
 
+        const companies = Object.values(
+            this.companyService.availableCompanies || {}
+        ).sort((a, b) => a.name.localeCompare(b.name));
+
         this.state = useState({
             companiesToToggle: [],
-            results: Object.values(this.companyService.availableCompanies || {}),
+            allCompaniesSorted: companies,
+            filteredCompaniesSorted: companies,
             hasResults: false,
         });
+
         this.searchInputRef = useRef("SearchBarInput");
     },
 
@@ -36,16 +42,16 @@ patch(SwitchCompanyMenu.prototype, "web_responsive_company.SwitchCompanyMenu", {
     _searchCompanies() {
         const query = this.searchInputRef.el.value;
         this.state.hasResults = query !== "";
-        const companies = Object.values(this.companyService.availableCompanies || {});
-        this.state.results = this.state.hasResults
-            ? fuzzyLookup(query, companies, (c) => c.name)
-            : companies;
+
+        this.state.filteredCompaniesSorted = this.state.hasResults
+            ? fuzzyLookup(query, this.state.allCompaniesSorted, (c) => c.name)
+            : this.state.allCompaniesSorted;
     },
 
     /* Key down on input search bar*/
     _onKeyDownSearchInput(ev) {
         if (ev.code === "Tab" || ev.code === "ArrowDown") {
-            if (this.state.results.length) {
+            if (this.state.filteredCompaniesSorted.length) {
                 ev.preventDefault();
                 document.querySelector(".company-card").focus();
             }
diff --git a/web_responsive_company/static/src/xml/web_responsive_company.xml b/web_responsive_company/static/src/xml/web_responsive_company.xml
index 003ceaa214cc..6bccf2b93e13 100644
--- a/web_responsive_company/static/src/xml/web_responsive_company.xml
+++ b/web_responsive_company/static/src/xml/web_responsive_company.xml
@@ -31,7 +31,7 @@
 
         <!-- All or filtered companies -->
         <t
-                t-foreach="state.results"
+                t-foreach="state.filteredCompaniesSorted"
                 class="search-results"
                 t-as="company"
                 t-key="company.id"