diff --git a/gallery/src/pages/components/ha-selector.ts b/gallery/src/pages/components/ha-selector.ts index dcc099b636..b794d15671 100644 --- a/gallery/src/pages/components/ha-selector.ts +++ b/gallery/src/pages/components/ha-selector.ts @@ -195,6 +195,48 @@ const SCHEMAS: { }, }, }, + select_disabled_list: { + name: "Select disabled option", + selector: { + select: { + options: [ + { label: "Option 1", value: "Option 1" }, + { label: "Option 2", value: "Option 2" }, + { label: "Option 3", value: "Option 3", disabled: true }, + ], + mode: "list", + }, + }, + }, + select_disabled_multiple: { + name: "Select disabled option", + selector: { + select: { + multiple: true, + options: [ + { label: "Option 1", value: "Option 1" }, + { label: "Option 2", value: "Option 2" }, + { label: "Option 3", value: "Option 3", disabled: true }, + ], + mode: "list", + }, + }, + }, + select_disabled: { + name: "Select disabled option", + selector: { + select: { + options: [ + { label: "Option 1", value: "Option 1" }, + { label: "Option 2", value: "Option 2" }, + { label: "Option 3", value: "Option 3", disabled: true }, + { label: "Option 4", value: "Option 4", disabled: true }, + { label: "Option 5", value: "Option 5", disabled: true }, + { label: "Option 6", value: "Option 6" }, + ], + }, + }, + }, select_custom: { name: "Select (Custom)", selector: { diff --git a/src/components/ha-formfield.ts b/src/components/ha-formfield.ts index 8a52c5ba5a..c536f7e820 100644 --- a/src/components/ha-formfield.ts +++ b/src/components/ha-formfield.ts @@ -13,6 +13,9 @@ export class HaFormfield extends FormfieldBase { switch (input.tagName) { case "HA-CHECKBOX": case "HA-RADIO": + if ((input as any).disabled) { + break; + } (input as any).checked = !(input as any).checked; fireEvent(input, "change"); break; diff --git a/src/components/ha-selector/ha-selector-select.ts b/src/components/ha-selector/ha-selector-select.ts index 71869b0e68..d051b5f125 100644 --- a/src/components/ha-selector/ha-selector-select.ts +++ b/src/components/ha-selector/ha-selector-select.ts @@ -13,6 +13,7 @@ import type { HaComboBox } from "../ha-combo-box"; import "../ha-formfield"; import "../ha-radio"; import "../ha-select"; +import "../ha-input-helper-text"; @customElement("ha-selector-select") export class HaSelectSelector extends LitElement { @@ -50,7 +51,7 @@ export class HaSelectSelector extends LitElement { @@ -69,7 +70,7 @@ export class HaSelectSelector extends LitElement { @@ -112,7 +113,9 @@ export class HaSelectSelector extends LitElement { .disabled=${this.disabled} .required=${this.required && !value.length} .value=${this._filter} - .items=${options.filter((item) => !this.value?.includes(item.value))} + .items=${options.filter( + (item) => !item.disabled && !this.value?.includes(item.value) + )} @filter-changed=${this._filterChanged} @value-changed=${this._comboBoxValueChanged} > @@ -136,7 +139,7 @@ export class HaSelectSelector extends LitElement { .helper=${this.helper} .disabled=${this.disabled} .required=${this.required} - .items=${options} + .items=${options.filter((item) => !item.disabled)} .value=${this.value} @filter-changed=${this._filterChanged} @value-changed=${this._comboBoxValueChanged} @@ -157,7 +160,9 @@ export class HaSelectSelector extends LitElement { > ${options.map( (item: SelectOption) => html` - ${item.label} + ${item.label} ` )} diff --git a/src/data/selector.ts b/src/data/selector.ts index 1620f1c306..9b1e570fb4 100644 --- a/src/data/selector.ts +++ b/src/data/selector.ts @@ -189,6 +189,7 @@ export interface ObjectSelector { export interface SelectOption { value: string; label: string; + disabled?: boolean; } export interface SelectSelector {