diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index 71747c4d27..37897ea0e8 100644 --- 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 index 5708470a45..148a654603 100644 --- 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; }