Allow to sort options in select selector (#17468)

home-assistant · Aug 3, 2023 · b4e2f4b · b4e2f4b
1 parent a8debb8
commit b4e2f4b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 3 deletions.
diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts
@@ -16,6 +16,7 @@ import "../ha-formfield";
 import "../ha-radio";
 import "../ha-select";
 import "../ha-input-helper-text";
+import { caseInsensitiveStringCompare } from "../../common/string/compare";
 
 @customElement("ha-selector-select")
 export class HaSelectSelector extends LitElement {
@@ -51,12 +52,25 @@ export class HaSelectSelector extends LitElement {
 
     if (this.localizeValue && translationKey) {
       options.forEach((option) => {
-        option.label =
-          this.localizeValue!(`${translationKey}.options.${option.value}`) ||
-          option.label;
+        const localizedLabel = this.localizeValue!(
+          `${translationKey}.options.${option.value}`
+        );
+        if (localizedLabel) {
+          option.label = localizedLabel;
+        }
       });
     }
 
+    if (this.selector.select?.sort) {
+      options.sort((a, b) =>
+        caseInsensitiveStringCompare(
+          a.label,
+          b.label,
+          this.hass.locale.language
+        )
+      );
+    }
+
     if (!this.selector.select?.custom_value && this._mode === "list") {
       if (!this.selector.select?.multiple) {
         return html`

diff --git a/src/data/selector.ts b/src/data/selector.ts
@@ -296,6 +296,7 @@ export interface SelectSelector {
     mode?: "list" | "dropdown";
     options: readonly string[] | readonly SelectOption[];
     translation_key?: string;
+    sort?: boolean;
   } | null;
 }