Allow to disable a select option (#13618)

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: {

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;

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 {
                   <ha-radio
                     .checked=${item.value === this.value}
                     .value=${item.value}
-                    .disabled=${this.disabled}
+                    .disabled=${item.disabled || this.disabled}
                     @change=${this._valueChanged}
                   ></ha-radio>
                 </ha-formfield>
@@ -69,7 +70,7 @@ export class HaSelectSelector extends LitElement {
                 <ha-checkbox
                   .checked=${this.value?.includes(item.value)}
                   .value=${item.value}
-                  .disabled=${this.disabled}
+                  .disabled=${item.disabled || this.disabled}
                   @change=${this._checkboxChanged}
                 ></ha-checkbox>
               </ha-formfield>
@@ -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}
         ></ha-combo-box>
@@ -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`
-            <mwc-list-item .value=${item.value}>${item.label}</mwc-list-item>
+            <mwc-list-item .value=${item.value} .disabled=${item.disabled}
+              >${item.label}</mwc-list-item
+            >
           `
         )}
       </ha-select>

src/data/selector.ts

@@ -189,6 +189,7 @@ export interface ObjectSelector {
 export interface SelectOption {
   value: string;
   label: string;
+  disabled?: boolean;
 }
 
 export interface SelectSelector {